- BadminTime: Enjoy badminton at the right place and right time with the right people at BADMINTIME!
- This application is deployed on Heroku: link here.
Jeffrey and Yuan are both badminton lovers. They play badminton every Wednesday with several friends together near Mukilteo, WA. Sometimes they find it difficult to find out who is participating the coming event from messages in the group chat, since their friends might fail to see the message, not reply in time, or that the group chat is flooded with other unrelated chitchats.
For this project, they are trying to build a website to help people create and sign up for events. In this way, they believe people can hold an event in a more efficient way.
-
create an event
- As an event organizer
- so that I can set time, place for this event, and publish with a short introduction
- I want to start an event
-
attend an event
- As an event participant
- so that I can provide my name and contact information to the organizer who can getting to know me
- I want to sign up for an event
-
modify or delete an event
- As an event organizer
- so that I can update or delete event information in case of any change
- I want to modify or delete an event
- Home page of the website. If not logged in, you are able to browse existing events via
Explore
tag on navigation bar. - In the
Explore
tag you can view the existing events. If you are logged out and you clickNew Event
button, an error message will appear: - If you click the title of one event, you can see the event detail:
- You can search the event location on google map:
- If you are viewing an event created by others and you are logged in, you should be able to sign up for it. (You can also quit it afyer signing up.) However, you won't be able to sign up for an event if you are logged out:
- You can login or register:
- After logging in, you will see a different navigation bar, with
My Events
where you can view the events that you are going to participate, and a tag with your username which will direct you to your profile: - You will now be able to create a new event:
- If you view the event that you created, you will be able to edit it, delete it, or go back to the previous page:
- Fully enabled Angular to talk to database API in Express to execute GET, PUT, POST, DELETE methods.
- Improved login feature in Express and made Angular talk to the api in Express.
- Added third-party element: Angular google map & Google Maps JavaScript API to enable google map in events with autocomplete search box.
- Updated UI.
- Updates are shown in Application Details
- Added create-event form in events component and signup form in event-details component.
- Enabled change of visibility of these forms by clicking corresponding buttons.
- Moved hard-coded data in event list into event-list.component.ts and enabled binding between fake data and html.
-
Add authentication (register, login) to API
-
Fix API bugs
- Created necessary Angular components
- Built static webpages.
- Enabled basic routing.
- Next:
- fix collapse nav problem.
- make create event form and sign up form
- enable talking to API.
- Initiated Express and Angular projects
- Finished first draft of the API, including the following parts:
- set up basic logics for models, routes and controllers
- used schema to model the data, push database live on mlab
- defined and organized routes in Express
- finished methods in the controllers, handling potential requests and sending responses
- Took appreciation of Yuan's front-end work
- Angular google map & Google Maps JavaScript API.