EventBike is an event planning tool designed for the motorcycle and bicycle communities. Inspired by Eventbrite, it shares many features such as user authentication, event search, an interactive map, and a user dashboard.
To improve user experience, the initial user authentication form is streamlined to a single input field. If the username they enter exists, they are directed to the login form. If they are a new user, they are asked for their email (optionally) and to enter a password for their account.
| Existing User | New User |
|---|---|
 |
 |
The database is seeded with sample events which are sorted into categories. Users can search through the events by entering key words on the splash page, or they can select Browse Events from the navigation bar to view a list of all the events, or events sorted by category.
| Search bar | Map |
|---|---|
 |
 |
Users can saved events by clicking the 'Bookmark' icon at the lower right corner of the event card. They can then register for the event by going into the event's page and clicking the 'register' button. When a user registers for an event, the event's card is updated with the current number of attending users. The event will also show up on the user's dashboard under "Tickets."
| User Dashboard |
|---|
 |
Any user with an account can create an event by filling in a few form fields. The location field helps the user find the venue using Google Maps Geocoding API.
| Geocoded Locations |
|---|
 |
EventBike is a single page web app that uses React's hashrouter to simulate page navigation. React delegates most of the rendering to the user's browser which dramatically speeds up load time on complex pages.
- root
/- Sign in
/signin- Sign up
/signin/signup - Sign in
/signin/login
- Sign up
- Events index
/events- Event show page
/events/:id
- Event show page
- New Event
/create - Category
/categories/:id - User Dashboard
- Tickets
/users/:id/tickets - Bookmarks
/users/:id/bookmarks - Created events
/users/:id/myevents
- Tickets
- Sign in
Sass is used to streamline and organize the styling of EventBike's different components.
jQuery takes care of AJAX calls which connect the frontend to the backend.
Webpack processes and bundles the javascripts together.
Ruby on Rails is the framework used for generating models, database schema, controllers, and backend routes.
| Route | Index | Create | Show | Destroy |
|---|---|---|---|---|
| Events | ✅ | ✅ | ✅ | ✅ |
| Registrations | ✅ | ✅ | ❌ | ✅ |
| Users | ✅ | ✅ | ✅ | ❌ |
| Bookmarks | ✅ | ✅ | ❌ | ✅ |
| Categories | ✅ | ❌ | ✅ | ❌ |
| Session | ❌ | ✅ | ❌ | ✅ |
Event
- belongs to creator
- has many registrations
- has many attendees
User
- has many events
- has many registrations
- has many bookmarks
- has many attending events
- has many bookmarked events
Bookmark
- belongs to user
- belongs to event
Registration
- belongs to user
- belongs to event
Users, Events, Registrations, and Bookmarks are organized in a relational database powered by Postgres.
Table Columns
- Events
| title | details | creator_id | date | location | lat | lng |
|---|
- Users
| username | password_digest | session_token |
|---|
- Bookmarks
| user_id | event_id |
|---|
- Registrations
| user_id | event_id |
|---|
npm installbundle installrails db:reset
webpack --watchsass --watch app/assets/stylesheetsrails sOpen browser to localhost: 3000
git push origin mastergit push heroku master
At the moment, search only indexes by title. It should also look into the event description, event organizer, and perhaps it should organize by category.
Users should be able to come up with their own categories when they create an event.
Hovering over a map marker should show a glimpse into the event's show page before directing the user into the page.
Users should be able to edit the events they made and add markdown to the description.
Users should be able to sign in using their facebook or google accounts.