LorranSutter / Local-library-React

Express JS tutorial from Developer Mozilla with React

Local Library - React

This project is an extension of a previous version of a tutorial from Developer Mozilla to build a Local Library using Express JS.

This application was developed using React as frontend, but also you can check this application implemented using Pug template here.

Development and challenges  |   How to run  |   Resources  |   Technologies

📏 Development pipeline and challenges

This project is an extension from this another project implemented using Pug. You may check the whole development pipeline there if you want. Here I will just talk about the differences and new challenges.

1. As mentioned above, this project is an extension of a previous version. I have decided to extend this version so as to I could learn more about ReactJS. For such, I should start turning my Pug template into a API.

2. Initially, I started this project to learn more about ReactJS. However, I realized that it was the opportunity to improve another skill: testing.

3. Before moving to frontend development with React, I set out to build test cases to my API. I chose to use Jest as my testing framework, due to its simplicity and because I had already have some contact with this tool.

   In the meanwhile, I got confused with integrating properly my API with Jest using mongo as database. I found this blog Endpoint testing as a valuable source to help me on this path.

4. We have lots of great system designs provided by companies so as to developers can create apps based on the interfaces of these companies. I have decided to use Polaris from Shopify to develop this interface.

   Polaris is a great system design with a extensive documentation of how and where to use colors, shapes, icons, spacing and so on. Also, it provides a great library of react components, which makes really easy to develop your own interface.

🏃 How to run

Open your terminal in the folder you want to clone the project

# Clone this repo
git clone https://github.com/LorranSutter/Local-library-React.git

# Go to the project folder
cd Local-library-React

# Go to each folder and install dependencies
cd backend
npm install

cd ../frontend
npm install

Now you will need two opened terminals to run the project. One for the backend and another one for the frontend.

Backend will run on http://localhost:5000/

Frontend will run on http://localhost:3000/

# Go to backend
cd backend

# Run the project
npm start

## In the another terminal ##

# Go to frontend
cd frontend

# Run the project
npm start

If you want to use your own mongodb account, replace the following variable with your own mongo URL:

# Go to backend/connectionDB.js
MONGOURI = <your-url>

Then you may populate your database using the following command:

cd backend

# Go to populate.js and change the mongo url as well
MONGOURI = <your-url>

# Run script
node populatedb.js

📖 Resources

• Developer Mozilla - tutorial to build local library
• Endpoint testing - article about testing

💻 Technologies

• Polaris - design system
• Express - web application framework
• MongoDB - NoSQL database
• Async - library to perform asynchronous operations
• Express validator - middleware to validate data
• ReactJS - frontend library
• Axios - HTTP requests
• Jest - library for tests