/edu-schedule-constructor

Custom college/school schedules constructor

Primary LanguageTypeScript

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: Assembled

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