MVST Timer

This app is a timer application that allows the user to start counting time by clicking the button on the center of the screen, which also displays the currently tracked time. Clicking the button again stops the timer and resets the small timer displayed in the button.

The total tracked time by all users is shown in the timer above the button. The big timer should be updated when the app loads on the screen, and when the user stops his timer.

There is also a switch to toggle between light and dark mode.

You can see this project deployed at here

Features

• LocalStorage to save dark/light mode selected by user
• Toggle spring animation
• On background change soft transition
• Page animation on load
• Toast notifications from API errors

Index

• MVST Timer
  • Features
• 🚀 Getting Started
  • Requirements 📋
  • Installation 🔧
• 🦴 Project Structure
  • Folder structure 🗂
• Testing
• Decisions made
• ✨ Wishlist
• Exercise feedback
• 🕵️‍♂️ Resources
• 🖇️ Contributing
• ✨ Contributors

🚀 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. This repo is a monorepo configured with Yarn Workspaces. Both the frontend and backend of the app are in this repo.

Requirements 📋

You need to have NodeJs installed. If you don't have Yarn already need to install it globally: npm install --global yarn

Once you have installed these programs, you need to create an account for: MongoAtlas or have another MongoDB already configures

Installation 🔧

First, you will need to clone or fork the repository into your Github account:

$ git clone https://github.com/mhfortuna/mvst-tech-challenge

Then run yarn install in the root folder.

When you have all the dependencies installed you need to create two .env files located one in packages/client and the other in packages/server : packages/server/.env

# Server settings
PORT=4000

# Mongo Atlas settings
MONGO_DB_URL={MongoAtlasDbUrl}

CLIENT_URL={Route of the client for CORS policies, '*' will allow all}

packages/client/.env

REACT_APP_BACKEND_API_ROUTE={The backend API route (for development http://localhost:4000/api}

CLIENT_URL=<Route of the client for CORS policies>

🦴 Project Structure

Folder structure 🗂

  
├───.github		// Github actions config files 
└───packages
    ├───client
    │   ├───public
    │   └───src
    │       ├───api		//Call to external APIs 
    │       ├───components
    │       ├───constants
    │       ├───pages
    │       └───utils		// Multipurpose code 
    └───server
        └───src
            ├───config		// configuration read from .env 
            ├───controllers
            ├───db
            ├───models
            └───routes

Testing

To run test run:

$	yarn client-test

The only testing is made for the frontend. There are two small tests to verify the page renders correctly and that the dark mode toggle is working

Decisions made

• Tailwind was used for faster development. Dark mode was implemented using Tailwind class detection.
• Framer motion was used for better control of transitions and animations
• Since there is no authentication, for security only CORS policies were used

✨ Wishlist

• Add some sort of username and a global records ranking

Exercise feedback

Being my first Typescript app it was challenging, specially for the project setup. Anyways, it is a short exercise, focused on very important concepts. Maybe the use of react router would be a thing to add.

🕵️‍♂️ Resources

• Axios
• Eslint
• Express
• Framer-motion
• MongoDB
• Mongoose
• Nodemon
• PostCSS
• Prettier
• React
• React-icons
• React-toastify
• Tailwind
• Typescript

🖇️ Contributing

If you want to contribute, please fork the repository, create a new branch whit your contribution, and push the branch as a pull requests.

✨ Contributors

Mathias Fortuna 💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! [](#contributors-)