General Assembly - project 3

Burnt Toast - MERN stack - film review site

Collaboators: Kirtan & Shak

Timeframe: 10 days

Goals 🎯

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 🖥️ ➡️ 🖥️

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.

Work split :

Shak took ownership of :

• Project Idea (a movie review website called burnt toast, based on rotten tomatoes)
• Backend setup (Implementing index.js, the environment & config, basic models & routes setup).
• Some route testing using insomnia.
• Some CSS - specifically positioning of elements in the header section.

Kirtan took ownership of :

• The fairly complex search-bar feature.
• ALL Media queries.
• Some other CSS - helping Shaq with the header section, Profile-Page, ALL scrolling effects.
• Adding data to the database to help with testing.

I took ownership of :

• Structural design & wireframes.
• Model relationships, routes & controllers for the more complex crud operations.
• Authentication (front and backend).
• Lots of route testing using insomnia.
• Seeding the database.
• Exported helper functions for making requests on the front end.
• All forms.
• Mapping over data to build dynamic components like the carousel.
• Most components and their styling for computer screens - using the SCSS system.
• Both libraries - being the only person familiar with Bootstrap & React Reveal at the time.
• Project deployment.

Building features :

Backend Setup :

Establishing the Mongo database, then fundamental models, routes and controllers etc was all possible by closely following our notes, Shak - started us off with the environment & index.js.
We pair coded and group coded regularly using VS.code liveshare and I tested routes often, using Insomnia (analogous to postman which you also may be familiar with). Testing in this way allows us to ensure our requests, our routes & controllers are functional before starting work on the frontend.

Frontend Setup :

I began work on the frontend once we were able to make the basic requests. These requests were as follows:

• (POST) Register a user, Login, add a movie to the database.
• (GET) get the users data, get the data for one or all of the movies.
• (PUT) edit a movie.
• (DELETE) delete a movie.

Just before I 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 I was unfamiliar with.
I created a ‘helpers’ folder containing configurable callback functions for making our requests. In this way the request functions can all be located and edited fairly easily if necessary down the line.

Examples of helper functions I wrote - backend:

Frontend build :

Our plan gave us a clear overview of the components we would have to build for our MVP and I made quick progress there - building things like the nav bar and the footer which would be seen on every page - then the register and login form.
Much of the logic for building these pages and components works in the same sort of way - request data from the database, map over it and display it appropriately.
The home page (carousel of movies within the database which is updated live) was challenging and I took ownership over that component too, having worked with the react bootstrap library in the past.
Kirtan built a complex search bar system, utilising what he’d learned on his previous project - an outstanding feature of the frontend.

Carousel I built by mapping over objects in the database: Code snippets - personal contributions - backend:

Backend update:

Shak and I worked out which schemas and relationships we would need to allow a logged in user the ability to comment on a movie and like existing comments. I wrote complex controllers for those operations, testing them on insomnia to make sure they worked.
I then hooked up the front end, which was surprisingly challenging. The like / unlike system still needs some small tweaks on the frontend. - I felt there was room for improvement.

Schema relationships - embedded within embedded:

Example of controller for complex crud opperations :

Styling :

Shaks name idea gave us the theme / colour scheme of the site. He did lots of tweaking on styling. Kirtan wrote all media queries, scrolling effects and styles for features like the header and footer. I took ownership of :

• The logo & typefaces
• Shaping / positioning most of the components.
• I found & implemented a second React library called Reveal, which allowed me to make simple animations on all of the forms, giving the site a slightly more dynamic feel.

Example of imported files and nested rules using SCSS:

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 & Wins 📈

• 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.