CISC275-Rewind (Project)

frontend | backend | github |

Overview

This was the biggest project yet! I thought I could make a simple react app to showcase other students’ projects in the class but it got me down a rabbit hole of databases, servers, and the MERN stack.

Technologies used:

• Frontend
  • Typescript
  • Material UI
  • React
  • Redux (partially for state management)
  • React Router (for multipaging)
  • Axios (for making API calls)
• Backend
  • NodeJS & Express
  • Mongoose
  • MongoDB Atlas
  • Marker & Sanitizer

Tutorial that helped:

• Learn MERN stack

MERN stack

The MERN stack is made up of 4 different technologies, namely MongoDB, Express, React and Node. This makes up a full stack application that is versatile and scalable (as I’ve read).

The project I built was a culmination of having to learn the highlevel details of each of these stacks.

Technical Details

This is a CRUD project, namely, Create, Read, Update and Delete. This is a very versatile model as it is what can describe (so I’ve read) most social media or generally any app that requires those 4 “functions”. The plan for our app is divided into pages:

Home

This is a simple page that has an ‘About’ section and a link to the ‘Create Project’ page. This page can be customized to be a course page if necessary.

View Projects

This is a page that allows users to click on existing projects and view their detail. Thus it has two components, master view with all the projects and detail view with detail from a single project.

Add Project

This is a page that allows users to create a new project or edit an existing project. The key heuristic I had for this page is to allow users to write in Markdown. I learned that this is possible using Marker, an npm package from NodeJS.

State Management

From this tutorial, it recommended to use Redux in order to easily manage state. I regret going down this route as it led to a lot of boilerplate code and time wasted.

Routing

I really wanted users to be able to go to [name of website]/projects or /add-project to view or add projects. I learned how to use React Router to accomplish this. This seems useful for bigger React projects with multiple pages!

User Interface

I used Material UI for the user interface and also borrowed styling code from here. I wanted the projects themselves to be cards as this is a modern and compact design.

Backend

Database

I decided to use MongoDB because I have previously used Firebase which is also a non-relational database and is very similar .

API

The frontend communicates with the backend through API requests. The backend receives REST patch, get, delete, etc. this allows for RESTful API communications between the backend and frontend.

File structure

I followed this tutorial’s way of organizing files such as creating controllers in the backend instead of populating index.js or model folder for defining the schema of the database using mongoose.

Other funcitonalities

It also allows you to like other projects, add “tags” to projects and hopefully it will allow you to add comments although this is not yet implemented.

Takaways

This was definetely a daunting project to implement even with the heavy use of tutorials about MERN. It does create opportunity, however, for bigger projects that follow the same stack, so I am glad I built it.