Location Planner App

Preview

About

This project is an improved version of a personal Location Planner project.

The main task is to recreate the project and learn using:

• React

• React Redux

• React Router

• React Hook Form

• Material UI

• Express

• Cypress

• Mock Service Worker

• And more..

App Features

• Start React Redux JS template
• Use Material UI components
• Add React Big Calendar
• Event location btn
• Mock REST API (Mock Service Worker)
• Async Logic and Data Fetching in Redux
• Get Events from mock API
• React hook form (add/update/delete)
• Form field validation
• Form field error notifications
• API status notifications
• Users profile (select color)
• Display Events by Users (colors)
• Login/Logout
• Router
• Express backend
• JWT
• Roles
• Tests

Usage

Install Dependencies

Backend & Frontend

  npm install
  cd frontend
  npm install

Backend Environment Variables

.env file

NODE_ENV = development
PORT = 5000
MONGO_URI = insert_your_mongodb_uri
JWT_SECRET = any_string

Frontend with Mock API

Set environment variable

.env file in frontend directory

REACT_APP_MOCK_ENV = enabled

Available Scripts

  # Run frontend (:3000) & backend (:5000)
  npm run dev

  # Run backend only
  npm run server

  # Run frontend only
  npm run client

  # Run Cypress

  cd frontend

  npm run cypress:open

  # Or use npx
  npx cypress open