GithubHelp home page GithubHelp logo

lab-express-rooms-with-reviews's Introduction

logo_ironhack_blue 7

Rooms App with Reviews - final practice for project #2



Introduction


In previous lessons, we covered all the basics one full-stack app can have. Now is the time for you to implement all these features one more time.


Instructions

The app needs to have users (signup, login, and logout functionality) and full CRUD on at least one of the models, but that one model can't be just users (you can have CRUD on users as well, but that can't be the only one). So let's summarize the requirements:

  • Models: User, Room, Reviews
  • Routes: auth, rooms, reviews, users (optional, in case you want to add CRUD on users as well)
  • Views: all the necessary pages so the users can auth themselves and do the CRUD. For easier navigation through your files and consistent naming please organize all the pages into folders (ex. auth-views, room-views, comment-views, ...)

Iteration 0 | Create the project

Once more, let's use our friend IronLauncher and create a new app:

$ ironlauncher rooms-app
$ cd rooms-app
$ npm run dev

Iteration #1: The Signup & Login & Logout Features

Our app will have users, and they will use email and password to authenticate themselves. They will also have to input their full name when signing in. In addition to this way, please feel free to use any of the social strategies (this is a bonus feature).

So your user schema should look somewhat like this:

const userSchema = new Schema(
  {
    email: String,
    password: String,
    fullName: String,
    // slack login - optional
    slackID: String,
    // google login - optional
    googleID: String
  },
  {
    timestamps: true
  }
);

Now create all the routes and views needed to have users successfully signup/login/logout. For auth, you can use passport.js and its local strategy or the sessions & cookies setup.

💡 Make sure you install all the packages:

For passport.js: bcrypt, passport, passport-local,

For sessions & cookies: bcryptjs, express-session, connect-mongo.

And if you have social login: passport-google-oauth and/or passport-slack.

Hint: You have already everything set up in the previous lessons + class examples, be resourceful 🥳.


Iteration #2: The CRUD on the room model

Great, we have users so let's start adding some more functionality to our app. Our rooms will have following schema:

const roomSchema = new Schema({
  name: { type: String },
  description: { type: String },
  imageUrl: { type: String },
  owner: { type: Schema.Types.ObjectId, ref: "User" },
  reviews: [] // we will update this field a bit later when we create review model
});

Our users can:

  • create new rooms only when logged in
  • edit and delete the rooms only if they created them (if they are the owners)
  • see the list of the rooms even though they are not logged in

Please proceed to create all the routes and files necessary to display forms and see the results after the submission.


Iteration #3: The review model and (optional) CRUD on it

Great, you already have a fully functioning CRUD app with users but we will go one more step: let's create reviews section for each room.

The review schema can look like this:

const reviewSchema = new Schema({
  user: { type: Schema.Types.ObjectId, ref: "User" },
  comment: { type: String, maxlength: 200 }
});

Now we can go ahead and update reviews property in the roomSchema:

// ...
reviews: [{ type: Schema.Types.ObjectId, ref: "Review" }];
// ...

Our users can:

  • when logged in, make reviews for all the rooms but the ones they created
  • when logged in, edit and/or delete their comments (optional)
  • when logged out, see the rooms and all the comments



Happy coding! ❤️

lab-express-rooms-with-reviews's People

Contributors

sandrabosk avatar ironhack-edu avatar jorgeberrizbeitia avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.