Skip to content

zorridge/rate-my-gym

Repository files navigation

RateMyGym - A Gym Review CRUD Web App

Give it a try to get the full experience! https://rate-my-gym.herokuapp.com

(Please expect a short delay in loading due to Heroku's web dyno sleeping)

Table of Contents
  1. About The Project
  2. Built With
  3. Usage

About The Project

image

Leveraging RESTful routing, RateMyGym is a mobile-friendly, full stack gym review web app built using Node.js, Express, and MongoDB.

Functionalities include:

  • CRUD operations (gyms and reviews) using Mongoose as the ODM
  • Client-side validation with UI indicators
  • Server-side validation using joi
  • Authentication using Passport.js
  • Authorisation, session management, and flash messages using express-session
  • Image upload and cloud storage using Cloudinary
  • Geocoding using Mapbox API
  • Interactive cluster map using Mapbox GL JS
  • Basic security using HTML sanitizing and helmet.js

(back to top)

Built With

The project implements the MVC architecture.

Main stack

  • EJS
  • Bootstrap
  • Node.js
  • Express
  • MongoDB

Third-party services

(back to top)

Usage

Quick Navigation
  1. Home
  2. View All
  3. Register
  4. Login
  5. Authentication
  6. Authorisation
  7. Create Gyn
  8. View Gym
  9. Update Gym
  10. Delete Gym
  11. Error Handling
  12. Client-side Validation
  13. Server-side Validation
  14. Flash Messages

Home

Mobile View

Screenshot_20220414-133547_Chrome (Small)

(back to Quick Navigation)

View All

Web View

image

Mobile View

Screenshot_20220414-133608_Chrome (Small)

Infinite scroll with vanilla JavaScript and querying /gyms/search

2022-04-14.14-47-18.mp4

(back to Quick Navigation)

Register

image

(back to Quick Navigation)

Login

image

(back to Quick Navigation)

Authentication

Non-users can only view the gym's info and its reviews

image

(back to Quick Navigation)

Authorisation

Non-owners can add reviews, but cannot edit the gym's info or other users' reviews

image

(back to Quick Navigation)

Create Gym

image

(back to Quick Navigation)

View Gym

image

(back to Quick Navigation)

Update Gym

image

(back to Quick Navigation)

Delete Gym

image

(back to Quick Navigation)

Error Handling

image

(back to Quick Navigation)

Client-side Validation

image

(back to Quick Navigation)

Server-side Validation

image

(back to Quick Navigation)

Flash Messages

Every CRUD action, login/logout/register, redirect will be accompanied by a flash message to improve UX, managed by the browser session

e.g. when non-users try to access "New" on the navbar

image

(back to Quick Navigation)

About

A full stack gym review web app built using Node.js, Express, and MongoDB

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published