Skip to content

MERN Calendar frontend App using react.js, redux-toolkit. Tested with react-testing-library and jest. Consumes a node backend api. Created using Vite.js

Notifications You must be signed in to change notification settings

augusticor/calendar-front

Repository files navigation

Calendar App - 📅 Frontend 📅

Calendar app is a web application for manage your life private events using a Calendar. Create an account and start organizing your days.

You are the only admin of your events, being able to:

  • Create events
    • Title, notes (optional), start date, end date
  • Update events
  • Delete events
  • View other people events (now only private events from march 2023)

Visit the deployed app at Calendar App

Check the backend code and tech stack at Calendar Back github repository

Update

From march 2023 you can only see your events, that means all the events are now private.

What is this repository ?

It's the source code for the frontend of the calendar app.

Tech stack

This project was created using the M.E.R.N. stack that stands for MongoDB, Express.js, React.js and Node.js

Frontend

Dependencies

Read other project dependencies and versions in the package.json file.

Backend

Check the backend code and tech stack at Calendar Back github repository

How to use this project

There are four ways you can use this project.

If you are going to use it for development, testing or your own production, first follow these steps for any of the modes:

  1. Configure the backend project with this configuration, in order to consume that api from this frontend project.
  2. Clone the frontend project git clone git@github.com:augusticor/calendar-front.git
  3. Continue with the mode you want

Development

  1. Install the project dependencies using npm install
  2. Rename the .env.development.template file to .env.development
  3. Start the project using npm run dev

Testing

  1. Install the project dependencies including development dependencies using npm install --include=dev
  2. Rename the .env.test.template file to .env.test and complete the pending environment variables
  3. Start the project using npm run test

Production

  1. Rename the .env.production.template file to .env.production and set the env variable VITE_API_URL to your deployed backend api url, take in account it should finish with /api
  2. Create optimized production site using the command npm run build
  3. Upload the dist folder to you preferred host

Live Deployment

Just visit the deployed app at Calendar App Render

Available scripts

npm run dev

Runs react app in development mode, uses the ".env.development" file.

npm run build

Starts testing the project and diplays the tests status in the command prompt. Uses the ".env.test" file.

npm run preview

Runs the app in preview mode, first build it. Refer to documentation

npm run test

Starts testing the project and diplays the tests status in the command prompt. Uses the ".env.test" file.

npm run ghcitests

Tests the project once and does not listen for changes in *.test.js files as "npm run test" would do. Use it for continuous integration.


More information on Vite commands: Official CLI docs

About

MERN Calendar frontend App using react.js, redux-toolkit. Tested with react-testing-library and jest. Consumes a node backend api. Created using Vite.js

Topics

Resources

Stars

Watchers

Forks