MERN | Portfolio Fullstack Application

About
Generate the project
Global information
How to implement a Full Stack feature?
Deployement on Heroku
Guideline to create clean code

About

Here is the code used for my portfolio website along with instructions for setting up your own!

Generate the project

MERN | Generate the project with the Github

For MERN boilerplate, check out @https://github.com/mc100s/mern-hooks-boilerplate/generate

Useful commands

To install all the packages

# Install server and client packages + build the React applicatin
$ npm install

# OR you can install manually the server and client packages
$ (cd server && npm install)
$ (cd client && npm install)

To install a package for the server

$ cd server
$ npm install axios

To install a package for the client

$ cd client
$ npm install axios

To run the server and the client

# Open a first terminal
$ npm run dev:server
# Run the server on http://localhost:5000/

# Open a second terminal
$ npm run dev:client
# Run the client on http://localhost:3000/

So now you can go to

http://localhost:5000/api/: A simple API call
http://localhost:5000/: The website based on client/build (that you can update with $ (cd client && npm run build))
http://localhost:3000/: The last version of your React application that is calling your API with the base url "http://localhost:5000/api/"

Global information

Directory structure

.vscode/
client/
    build/
    public/
    src/
        components/
            pages/
    package.json
server/
    bin/
    configs/
    models/
    passport/
    routes/
    app.js
    middlewares.js
    package.json
.gitignore
package.json
README.md

How to implement a Full Stack feature?

Implement it in the sever by creating a route and some models if necessary
Test it with Postman with many different cases
Create a new API method in client/src/api.js
Consume the API method in your client :)

Deployement on Heroku

To deploy the first time

Create a project on Heroku.com. Here for the demo I named the project "my-ironhack-project".

Then, you need to link your Git project with Heroku.

# Replace "my-ironhack-project" by the name of your Heroku project
$ heroku git:remote -a my-ironhack-project 
$ git push heroku master

Then you need to create a Mongo database online with MLab.

$ heroku addons:create mongolab:sandbox

To redeploy

You just need to push on heroku (don't forget to commit before):

$ git push heroku master

To execute a seed

If you want to execute something on the server, for example a seed, you can use heroku run.

Example:

$ heroku run node server/bin/seeds.js

To Open MongoLab

You can either go on the Heroku project page ("Overview" tab) or type the following command:

$ heroku addons:open mongolab

See the logs

$ heroku logs

Guideline to create clean code

Send the right status code

Your backend API sends some status code at every request. By default, it will send 200, which means OK, everything went fine.

If something bad happened, you should a send a different status code:

400 Bad Request: Something is missing in wrong in the request (eg: missing data).
401 Unauthorized: For missing or bad authentication.
403 Forbidden: When the user is authenticated but isn’t authorized to perform the requested operation on the given resource.
404 Not Found: The resources/route doesn't exist.
409 Conflict: The request couldn't be completed because of a conflict (eg for signup: username already taken).
500 Internal Server Error: The server encountered an unexpected condition which prevented it from fulfilling the request.

By sending the right status code, you will catch more easily your error on the client side.

Example on the server side

// If the user is not connected for a protected resource, we can send him this
res.status(401).json({ message: "You must be connected" })

Example on the client side

// Call to api.getSecret()
//   In case of success, state.secret is saved
//   In case of error (status code 4xx or 5xx), state.message contains the message from the error
api.getSecret()
  .then(data => this.setState({ secret: data.secret }))
  .catch(err => this.setState({ message: err.toString() }))

VitorTomazzi/folio