🏕️ SanMarg 🌲

- Development Process -

https://sanmarg.onrender.com

Initial Setup

• Add Landing Page
• Add Issues Page that lists all Issues

Each Issue has:

• Name
• Image

Layout and Basic Styling

• Create our header and footer partials
• Add in Bootstrap

Creating New Issues

• Setup new Issue POST route
• Add in body-parser
• Setup route to show form
• Add basic unstyled form

Style the Issues page

• Add a better header/title
• Make Issues display in a grid

Style the Navbar and Form

• Add a navbar to all templates
• Style the new Issue form

Add Mongoose

• Install and configure Mongoose
• Setup Issue model
• Use Issue model inside of our routes

Show Page

• Review the RESTful routes we've seen so far
• Add description to our Issue model
• Show db.collection.drop()
• Add a show route/template

Refactor Mongoose Code

• Create a models directory
• Use module.exports
• Require everything correctly

Add Seeds File

• Add a seeds.js file
• Run the seeds file every time the server starts

Add the Comment model

• Make our errors go away
• Display comments on Issue show page

Comment New/Create

• Discuss nested routes
• Add the comment new and create routes
• Add the new comment form

Style Show Page

• Add sidebar to show page
• Display comments nicely

Finish Styling Show Page

• Add public directory
• Add custom stylesheet

Auth Pt. 1 - Add User Model

• Install all packages needed for auth
• Define User model

Auth Pt. 2 - Register

• Cconfigure Passport
• Add register routes
• Add register template

Auth Pt. 3 - Login

• Add login routes
• Add login template

Auth Pt. 4 - Logout/Navbar

• Add logout route
• Prevent user from adding a comment if not signed in
• Add links to navbar

Auth Pt. 5 - Show/Hide Links

• Show/hide auth links in navbar

Refactor The Routes

• Use Express router to reoragnize all routes

Users + Comments

• Associate users and comments
• Save author's name to a comment automatically

Users + Issues

• Prevent an unauthenticated user from creating a Issue
• Save username + id to newly created Issue

Editing Issues

• Add method override
• Add edit route for Issues
• Add link to edit page
• Add update route

Deleting Issues

• Add destroy route
• Add delete button

Authorization (permission)

• User can only edit his/her Issues
• User can only delete his/her Issues
• Hide/Show edit and delete buttons

Editing comments

• Add edit route for comments
• Add edit template
• Add edit button
• Add update route

Deleting comments

• Add destroy route
• Add delete button

Authorization part 2: Comments

• User can only edit his/her comments
• User can only delete his/her comments
• Hide/Show edit and delete buttons
• Refactor middleware

Adding in flash

• Demo working version
• Install and configure connect-flash
• Add bootstrap alerts to header

Features

• Responsive web design (RWD)
• User authentication (Login/Register/Logout) and authorization (Post/Like/Edit)
• Flash messages responding to users' interaction
• Refactored with ES6 and ES7 syntax (eg: async/await)
• RESTful API

-------------------------------------------------------------------------
Normal Routes
-------------------------------------------------------------------------
[Method]  [Route]
GET       /                       Landing page
GET       /login                  Request the user login page
GET       /register               Request the user edit page

-------------------------------------------------------------------------
Users Route
-------------------------------------------------------------------------
[Method]  [Route]
GET       /users                  Fetch all users
POST      /users                  Create new user in database
GET       /users/new              Request the user register page
GET       /users/:id              Show the user information
PATCH     /users/:id              Update user information
DELETE    /users/:id              Delete user information
GET       /users/:id/edit         Request the user edit page

-------------------------------------------------------------------------
Sessions Route
-------------------------------------------------------------------------
[Method]  [Route]
POST      /sessions               Create a session (user login)
GET       /sessions/login         Request the user login page
DELETE    /sessions               Delete a session (user logout)

-------------------------------------------------------------------------
Issues Route
-------------------------------------------------------------------------
[Method]  [Route]
GET       /issues            Fetch all Issues
POST      /issues            Create a new Issue to database
GET       /issues/new        Request the Issue adding page
GET       /issues/:id        Show the Issue information
PUT       /issues/:id        Update Issue information (all)
PATCH     /issues/:id        Update Issue information (part)
DELETE    /issues/:id        Delete a Issue
GET       /issues/:id/edit   Request the Issue editing page
POST      /issues/:id/likes  Like the Issue

-------------------------------------------------------------------------
Comments Route
-------------------------------------------------------------------------
[Method]  [Route]
POST      /issues/:id/comments       Create a new comment
PATCH     /issues/:id/comments/:cid  Update comment
DELETE    /issues/:id/comments/:cid  Delete comment

Technologies

Frontend

• Bootstrap
• ejs

Backend

• express
• mongodb

Check package.json file for more information.

Getting Started

Follow the instructions below to set up the environment and run this project on your local machine.

1. Clone this repository.

# Clone repository
$ git clone https://github.com/kartik-gupta-ij/SanMarg.git

2. Install dependencies via NPM or Yarn

# Install dependencies via npm
$ npm install

# Install dependencies via yarn
$ yarn install

3. Setup .env file using example.env

4. Run the server with nodemon and open a browser to visit http://localhost:3000/.

# Run server
$ npm run start