Schedule Constructor

A simple app that can make ugly weekly schedule look even uglier more pleasant and handy

Demo

App deployed here (if I paid for hosting), so check it out if you interested trying it yourself!

Preview

Example of Assembled Schedule:

Tech Stack _{^{(❗click "►" to expand❗)}}

▷ Typescript

▷ Docker & Docker Compose

▷ MongoDB

Express

• JWT

  For user authentication

React

• MobX

  For global state management

• React Hook Form

  To create forms with necessary logic such as validation and form state management

• React Router Dom

  For dynamic routing and navigation in the app

• Error Boundary

  For handling errors and preventing bad user experience

• i18next

  For multi-language support (English / Russian)

• Axios

  For data fetching

Vitest/Jest

• Unit Testing

  (React components & utility functions)

• Simple snapshot testing
• Simple End2End testing (⚠️ Not Yet. working on... ⚠️)

CSS

• Styled Components

  For general components styling

• React Spring + Use Gesture

  Used to add delete/edit swipe animations

• React transition group

  To animate navigation in dropdown menu

Usage

1. Create an Account or Log in
2. Add cards of classes that you have
3. Add class schedule(s) so that app can show you start/end time of each class
4. Assemble weekly schedule by combining class cards and class schedules for each day individually
5. Click "Done" and that's it! Now this schedule will be displayed on the main page

Features

• Each day can have unique class schedule in case if they change throughout the week
• Progress indicator for ongoing classes
• Dark and light themes
• Multi-language support (English and Russian)
• Edit any card by swiping it to the right
• Or delete it by swiping to the left

Development

1. Clone repo using git clone command
2. Add two .env files in the client/ and server/ directories (look .env.example)
3. Use Docker compose to create images and run containers

docker-compose -f docker-compose-dev.yml up -d