YayPlan is an easy schedule planner app which you can use when you want to set up a gathering with your friends and families with a simple and modern user interface.
To use this app, you simply follow these three steps.
- Register a name of an event organizer(your name if you are planning an event) and an event key which is used to restore data afterwards.
- Set up the event details(event title, description, place) and suggest some dates so participants can vote.
- Share the link of the event with participants. In the link, participants can register their availabilities.
The goal of this project is to create a web application to enables users to plan an event and its date by following simple steps.
The target audience for this website is:
- People who want to plan an event and find out the most suitable date for the attendees.
The user goal is to have:
- A platform that allows them to launch a schedular which is easy to share with participants.
- The flexibility to modify the details of the plan and the number of participants.
- I would like to have a simple interface and functionality to set up an event without any registration.
- I would like to edit the details of the plan anytime when any change happens.
- I would like to avoid specifying the number of participants when creating the event, since it can be changed as the situation evolves.
- I would like to avoid anybody else from being able to change the details of the event.
- I would like to see which date is the most suitable for the participants.
- I would like to have multiple choices (Yes/No/Maybe) for the availability.
- I would like to have the ability to add a note to the organizer, which allows me to add additional context to availability option which I selected.
- I would like to have the ability to edit the answers whenever any change might happen.
Wireframes were created with balsamiq.
- As the illustrations used on main pages had some modern aesthetics of colors, as well as it's important to limit the total numbers of primary colors, I decided to use similar colors to the illustrations as the primary colors for this site.
#363636: Letters#fff: Background color#ff6666: Hovering over link elememts#bb7cfe: Button elements#1abc9b: Input Fields, Icons, Datepicker element
- This page is used as a landing page. It contains a "How It Works" section and a "Get Started" button to start the planning.
- Users register their name (organizer's name) and an event key. Event keys are used to restore the data when there is any change they need to make to the event, or if they need to restore the shareable link for participants or even delete the event itself.
- This page also checks if the combination of the name and the event key input is available or not.
- Users can set up the details (event title, description, date, place) of the event in this page. They can set up multiple dates so the participants can answer when they are available.
- This page comes up after completing the registration of the event details and provides the shareable link with participants.
- This page allows participants to add their name, availability (Yes/No/Maybe) and a note.
- Participants can edit their answers and also delete the data in this page.
- This page allows users to: 1. Edit the existing event data 2. Get the shareable link by entering the organizer name and the event key which they registered.
- After the date of the event has passed, the data is automatically deleted for storage purposes.
- All the forms in this site have a validation system and any submission with blank input is prevented. It displays a message to let users know neccessary input sections which are empty.
- An alert pops up when users press a button to delete the event data or the participant data, to prevent users from deleting data by mistake.
MongoDB Atlas is used for storing data for this web site.
The following is the data structure.
{
_id : ObjectId()
organizer_name : String,
event_key : String,
availabilities : Array,
event_description : String,
event_name : String,
event_place : String,
participants : Array
{
name: String,
availabilities: Array,
participant_note: String
}
}
This application contains key CRUD functionalities and they are used to maximize user's experience in this site. The main frontend development was created using HTML, CSS, JavaScript and their libraries. The main backend development was powered by Python and Flask.
- HTML, CSS, JavaScript, Python
- Bootstrap (v4.4.1)
- JQuery
- JQuery-UI
- Popper.js
- Font Awesome
- Flask
- Jinja
- PyMongo
- Git/GitHub
- Gitpod
- PIP
- MongoDB Atlas
I used these validation tools below for each file.
- HTML: W3C HTML Validator
- CSS: W3C CSS validator
- JavaScript: JSHint
- Python: PEP8 online
- HTML: HTML Formatter
- CSS: CSS Formatter
- JavaScript: Online JavaScript Beautifier
- Python:PEP8 online
Testing was done throughout the application being built. This application is built with a mobile first responsive design in mind. I created this testing matrix to make sure the site works as expected in different devices with the emuration funtion in Google Developer Tool, browsers and screen sizes.
- In the page for creating a new event(create_new_plan.html), if users added many empty availabilities forms at the same time and remove the forms randomly, the date was not correctly updated in the MongoDB collection. It was caused by the try/except method which I used in order to check if a key for availabilities exists in the request.form MultiDict object. After I replaced the try/except method with if/else statement, this bug was fixed.
- In the page for registering participants(update_plan_participants.html), if a participant uses a whitespace in their name, it caused a rendering issue after clicking 'Edit' button. It was caused by whitespaces surrounding the selected name which was created by text() function in JavaScript used to get the text for the name from the HTML. This bug was fixed by using the trim() function, which deletes all whitespaces before and after the selected text(in this case, the selected name).
- Safari: The css styling for a delete button in the Modal window in restored_data.html was not working in Safari. It was caused by
type="button"in the anchor tag that works as the delete button, and after deletingtype="button"it started working as expected.
For local deployment, you need to have an IDE such as Gitpod and you need to install the following in your IDE:
- Git, Python3, PIP3
- At the top of this repository, click the green button Clone or download.
- In the Clone with HTTPs section, copy the clone URL for the repository.
- Open your favourite terminal (cmd, powershell, bash, git bash, etc.)
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 2:git clone https://github.com/AsunaMasuda/MilestoneProject3.git - Press Enter. Your local clone will be created.
- You can either
- Create a virtual environment and create environment variables of IP, PORT, MONGO_URI and SECRET_KEY.
- Or edit the app.py file like the following variables:
'IP', '127.0.0.1''PORT', '5000''SECRET_KEY', '<somethingsecret>''MONGO_URI', 'mongodb+srv://<username>:<password>@<cluster_name>-ocous.mongodb.net/<database_name>?retryWrites=true&w=majority'
- Install all required modules from requirements.txt with the command
pip3 install -r requirements.txt - Now you can run the website with the command
python3 app.py - You can now access the website at http://127.0.0.1:5000
This website is deployed on Heroku, following these steps:
- Create a requirements.txt file using the command
pip3 freeze > requirements.txtin the terminal. - Create a Procfile using the commant
echo web: python app.py > Procfilein the terminal. - Commit and push all the changes to the Github repositoty of this project.
- Go to Heroku and create a new app. Set a name for this app and select the closest region.
- Choose Deployment method as GitHub in Heroku Dashboard and link the Github repository to the Heroku app.
- Go to Settings then Reveal Config Vars in Heroku Dashboard and set the values as follows:
| Key | Value |
|---|---|
| IP | 0.0.0.0 |
| PORT | 5000 |
| MONGO_URI | mongodb+srv://<username>:<password>@<cluster_name>-ocous.mongodb.net/<database_name>?retryWrites=true&w=majority |
| SECRET_KEY | <your_secret_key> |
- All text within this project was written by the developer.
- All the icons in this website were provided by Font Awesome.
- The images used in the home page are created by pikisuperstar - www.freepik.com.
- The favicon for this site is provided by flaticon
- I used this article as reference when deciding the color scheme. 7 Tips To Organize Colors for UI Design
- The datetime picker is powered by flatpickr.
- Thanks to: my Code Institute Mentor Guido Cecilio Garcia Bernal for his advice throughout the development process.
- Code Institute Slack Community that gave me a light when I was stuck in my coding.