FDU Project: BadminTime

Final Project for CS5610 Web Development in Northeastern University

• BadminTime: Enjoy badminton at the right place and right time with the right people at BADMINTIME!
• This application is deployed on Heroku: link here.

Links to each iteration

• Introduction
• App Details
• Iteration 3.0
• Iteration 2.0
• Iteration 1.0

Introduction

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

Application Details

• 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 click New 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:

Iteration 3

• 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

Iteration 2

Angular:

• 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.

Express:

• Add authentication (register, login) to API

• Fix API bugs

• GET EventList

• POST Event

• PUT (edit) and DELETE Event

• PUT Event (sign up)

Iteration 1

Angular:

• 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.

Express:

• 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

Decision on 3rd-party api:

• Angular google map & Google Maps JavaScript API.