General Assembly - project 3

Burnt Toast - MERN stack - film review site

The live project: Burnt Toast

Aim

• In the teams of three we’ve assigned you, build a full stack application.
• Use MERN stack - MongoDB, Express, React.js & Node.
• Include CRUD operations.
• For a challenge - include Authentication.
• Use SASS for styling
• For a challenge include one or more dependencies for React libraries
• It can be a direct clone of, or inspired by, an existing website.
• Make wireframes as well as a written plan in order for us to sign you off.

Overview

• Movie review website, on some level modeled after Rotten Tomatoes.
• Fully functional MERN stack application.
• CRUD operations - create, view, update and delete films on the database.
• + Rate films others have posted.
• + Add comments and ‘Like’ comments on particular films.
• Includes Authentication (Register / Login & perform restricted actions when logged in)
• Consistent styling throughout, achieved mainly with SASS.
• Two React libraries utilised - React-Reveal for some subtle animations and React-Bootstrap for some component styling, including a carousel that displays all movies in the database (including new additions)
• Responsive design (works on a range of screen sizes)

Tech

• Frontend - React & Sass - 50% :

  • The client facing APP.
  • Helper functions (configurable blueprints for sending requests).
  • Various pages on which components are rendered.
  • Index.js where the client facing app is injected into the document root (an HTML file).
  • Positioning, fonts & colouring.
  • Responsive design (media queries).
• Backend (JavaScript / MongoDB / Express / Node) 50% :

  • Configuration (the environment, the routes (endpoints) & secure routes
  • Controllers (functions which handle incoming requests)
  • Models - Exported schemas for data which will be added - this includes any relationships (embedded and reference relationships)
  • db - contains data and seeds.

Approach

• Beginning - planning :

  • Immediately we set up a Trello board
  • We started with written plans for the front and backend respectively.
    • Backend plan: we listed the necessary schemas, controllers, routes, secure routes and described the index, environment and database we would be building.
    • Frontend plan: we described the project, components and pages. - we also used wireframes as a visual aid and included those in the trello board.
  • We then added three lists - ‘to do’, ‘in progress’, ‘done’ - in order to track progress.
  • Once we had established the mongo db it was time to begin work on the backend code, starting with the environment & index - closely following the notes we made during the previous segment of the course.
  • We built the models we felt were necessary to deliver and MVP and established the required relationships. - My Teammate Shak largely took ownership over this step as he was keen to practice it.
  • We then began writing controllers and routes simultaneously and testing them using Insomnia (analogous to postman which you also may be familiar with). Testing in this way allows us to ensure our requests, our routes and our controllers are fully functional before starting work on the front end.
  • We began work on the frontend once we were able to make the fundamental requests and get the appropriate errors returned if we did not provide a valid authorization token. These specified requests were as follows:
    • (POST) Register a user, Login, get the user data, add a movie to the database, (GET) get the data for one or all of the movies, (PUT) edit a movie, (DELETE) delete a movie.
• Middle - bulk of the project :

  Just before we began work on the frontend, an update was made to the react-router-dom architecture, which introduced a bonus challenge - to correctly implement the new system we were unfamiliar with.

  • We created a ‘helpers’ folder containing configurable callback functions for making our requests. In this way your request functions can all be located and edited fairly easily if necessary down the line.
  • Our thorough plan gave us a clear overview of the pages and components we would have to build for our MVP and we made quick progress with those - building out things like the navigation bar and the footer which would be seen on every page - then the register and login form which we used to retest our requests and routes, successfully.
  • The home page (carousel of movies within the database which is updated live) was challenging and I took ownership over that component, having worked with the react bootstrap library in the past.
  • My Teammate Kirtan built a brilliant search bar system, utilising what he’d learned on his previous project.
  • Building out things like the ‘movies’ page felt easy and went smoothly overall.
• End - polishing & testing :

  • The later stages of the process involved adding to the backend. Shak and I worked out what kind of schemas and relationships we would need to allow a logged in user the ability to comment on a movie and like existing comments.
  • We had to write complex controllers for those operations, testing them on insomnia. Writing the controllers for liking and unliking a comment on a film was especially challenging, grappling with the logic until It worked on insomnia was a satisfying process.
  • I then began work on the front end, which turned out to be even more challenging funnily enough. I was able to make the commenting system work in time for the presentation but the like / unlike system still needed some small tweaks. - I felt there was room for improvement.
  • We then styled the project, finding fonts, a logo, and a color scheme that we felt suited the project. I took ownership over much of this stage of the process. I found and implemented a second React library called react-reveal, which allowed me to include simple animations on all of the sites forms, giving the site a slightly more dynamic feel.

Visuals

Homepage :

View all films :

View one film:

Add a film :

Profile page :

Key learnings

• Planning is everything.
• Create and populate a mongo database + working with express and node.
• Adapt when using newly updated architectures (react-router-dom)
• SASS makes for more readable and reusable CSS.
• React Reveal for simple animation of any component.
• Heavily customised react-bootstrap components can cause issues, be sure to allow time to achieve and test the intended effect.

Challenges

• Time management - packing as many features in as possible but making sure they all work effectively, removing the ones I couldn’t polish before deadline.
• Writing the logic for liking a comment was more complex than it sounds. I am yet to perfect the system.
• Creating working media queries to make an app fully responsive is no joke, this takes time and attention.
• Properly implementing useEffect() while working with props and components that instantiate inner components. (When you like a comment on a movie - it should be updated live and the like button should become an unlike button in that moment, without refreshing the page).

Possible future improvements

• View other users profiles.
• Like button fully functioning + add like button to movies as well as comments.
• More interesting home page (possibly a list of the top-rated movies at that time).
• Improved styling - currently feels clunky and outdated.
• Media queries need considerable work.
• Forms could appear in pop ups instead of on separate pages.

Bugs

• Some of the styling doesn’t work well when resizing the page (text jumps out of buttons and elements are laid on top of eachother)
• The Like button allows you to like a comment more than once.