Activities Recorder

Description

The Activities Recorder app lets you easily track your activities in real time using a stopwatch. It also has a calendar that shows all your recorded activities by day, along with their start and end times. You can edit or delete recorded activities whenever you need to.

Live Demo 🚀

Key Features:

Record start and end dates from an activity.
Update activity name.
Delete activity.
Check activities in Calendar

Technology
Setup

Technology

Vite;
React;
Typescript;
Redux;
SCSS;
ESLint;
Prettier;
Vitest;
react-testing-library;

Setup

Frontend

Clone the repository

$ git clone https://github.com/dianacpg/activities-recorder.git

Install packages
```
$ npm i
```
Add env variable to connect with the API

VITE_APP_API_BASE_URL

Start app
```
$ npm start
```

API

This app is build with fake json-server deployed in Vercel. You will need to create a new repository and follow json-server-vercel instructions.

Database json should follow the following structure example:

{
  "events": [
    {
      "title": "event 1",
      "dateStart": "2023-07-17T15:48:02.499Z",
      "dateEnd": "2023-07-17T15:48:08.720Z",
      "id": 1
    },
  ]
}

In order to be able to POST, PUT and DELETE successfully in the fake api, you just need to add the following code top of the file /api/server.js.

const fs = require("fs")
const path = require("path")
const db = JSON.parse(fs.readFileSync(path.join("db.json")))

And update router to use the db

const router = jsonServer.router(db)

After deploying to vercel add api url to VITE_APP_API_BASE_URL env variable

Note

This repo is a result of a migration from create-react-app to vite. You can check previous project here: project here:

dianacpg/activities-recorder