TarasKiricenko/Project-3

CEST Coworking and Event Space

Overview:

Software Engineering Immersive Course - Project-3 - Group Project - 10 days.

My colleagues, who also worked on this project:

Emile Sherrot | Sarantis Atonakas | Cristina Grande

Brief:

Group project with 4 people working on it. Time for development - just over a week. Task was to build a full stack product, with CRUD functionality and registration/login features.

Description:

The project is a website, which allows people to find office or hot desk space around the globe. We had to use a database we made ourselves, along with the data stored within it. Users can browse this website as a guest, find out where our imaginable partners are located on the map, read short descriptions about them and add their own workspace to our website. When registered and logged in, CRUD functionality is available, and users can also comment and leave ratings to the venues.

Key features:

The site has the following key features: the ability to browse and look up venues in the search bar, map with displayed venues, comment and rate, register of own workspace.

Deployed project:

CEST Coworking and Event Space

Tech used:

React Library - frontend.

Node.js, MongoDB, Mongoose, Express - backend.

Bootstrap, with occasional Bulma and little custom CSS - styling.

Sample screenshots:

Screen.Recording.2021-08-17.at.00.35.41.mov

Approach:

Build:

Create an Express application and get a backend server running for your API. Define schemas for workspaces and comments, set up models for workspaces and users, make sure that you create right relationship (embedded - such as comments depending on workspace, reference - when user is assigned as "owner" of "workspace" in schema, reverse - when we loop through model "workspaces" and check, whether if any are "owned" by user by comparing id's), create seeds files, process all needed requests of CRUD.

Create routing with defined API endpoints, test requests and move onto authentication, create a token for user registering and logging in, make sure you remove sensitive data from your requests (such as password and its validation). Create a secure route component, and apply it to routes that need to be protected from unauthorized use.

Move on to frontend. Create React app, update proxy middleware with port from backend, install axios, use 'api/' prefix on all axios requests you send to your API. Add react-router-dom, use Router, Switch and Route to establish the connection between components. Install React-Bootstrap and start developing the frontend functionality of the project.

Build your components, handling the requests and errors, storing data at state instances and using one for rendering. Use token set from backend as authentication piece allowing certain functionality on conditional ternaries, dependent on id match of current user and one, who created information piece, ex. "comment".

(for more detailed examples see "sample code")

Sample code:

Here we can see, how secure route is working at our backend:

In this asynchronous function, we first check if our "headers" are present, and if so, we try to verify our user through JWT payload.

User, who we try to verify has to be found by his id, which is "sub" in our token payload and if the user is found we can move towards the next function utilizing next().

---

Here is our schema for "workspace", our main API "unit", with embedded and reference relationship with "comments and "user" respectively:

Good example of setting a virtual field of avgRating to schema making sure it is set to JSON when response has been sent back from API.

Both "comments" and "workspaces" have a referenced owner field, which will be represented through Id.

---

Closing backend, let have a look at how Register/Login business works:

It takes data from frontend register forms, and sends it as JSON request body to API. If validation is passed, returns positive, if not - error.

When logging in, we use email and password for identification. In DB, function finds user matching (if any) email from request body.

Then it validates the password. So happy with prebuilds, awesome. If email is not found or validation of password has failed - error.

Passing the check, we also give that user a "token", made of expiry, secret, and sub of his id, which is generated by MongoDB.

---

Looking at the frontend, I had to solve an issue of getting a particular comment to be deleted:

I had to use 4 layered ternary and onMouseOver with onClick together, to perform the action, where only the user who added the comment can delete it.

Whole set of JSX is written with help of Bootstrap, another great framework to use. It was my first attempt to use it.

---

Another great thing to see on the homepage, carousel.

Just 20 lines of code in JSX.

Wins and challenges:

Wins

Great possibility to develop both sides of MERN APP, where I was concentrating on Authentication at the backend and Event section at the frontend.

Perfect opportunity to practice MongoDB, solidifying knowledge about relationships and modelling.

Lovely occasion of group programming, using GitHub collectively, practising version control and branch adjustments. Fantastic experience working as a part of a great team, probably one of the most important experiences during the course.

Challenges

There was quite a difficult way to manage error handling on the contact form I created, I used default methods, which is still a point to improve.

Time-management, where we had to adjust our group work to 3 different time zones, balancing self-development and healthy life.

Version control was quite challenging. I had to throw our development branch back once and restore data to needed condition, trying to resolve unnecessary node modules being pushed to it. Great fun!

Potential improvements:

Make the server send emails when registering.

Shopping cart functionality, with potential booking slots available.

Functionality for the map definitely needs improvements, all markers on it displayed simultaneously for now.

I would love to implement a pin on the map in order to set up a location for workspace, rather than typing it in when trying to register a new one.