/solent-mind

Our application offers a platform for the students of Solent Recovery College to sign-up/log-in, view and book courses related to mental health.

Primary LanguageJavaScript

Solent Mind 🧠

A Tech For Better project by FAC22

(for detailed project documentation, please look here ✨)

Table of contents 🔖

Team 🪴

(Back to top ⬆️)

What are we building? 🧱

(Back to top ⬆️)

  • Our application offers a platform for the students of Solent Recovery College to sign-up/log-in, view and book courses related to mental health.
  • Each user can have a quick overview of the available courses, the ones they have joined and their progress, as well as make a new booking.
  • Our goal is to build an easily accessible platform for our target group, to enhance their experience, as well as facilitate the organisers in scheduling and managing the participants.

Features ✨

(Back to top ⬆️)

How can you use the application?

  • Sign-up / Log-in with magic link
  • Set up a profile
  • See available courses the Solent Recovery College
  • Enrol themselves in any course that has availability
  • Un-enrol from a course if they cannot attend any more
  • See information about the college
  • Find contact details about the college

Tech Stack 🥞

(Back to top ⬆️)

Dependencies 🪢

  • react
  • react-dom
  • react-icons
  • react-router-dom
  • nextjs-redirect
  • next
  • cypress
  • @supabase/supabase-js
  • @headlessui/react

Database Schema 📦

(Back to top ⬆️)

Installation 👓

(Back to top ⬆️)

  • Steps to use this project:
    • clone this repo on your device using the command git clone
    • cd into the solent-mind folder
    • run npm install to install dependencies locally
    • create an .env file in the root folder. It should contain:
    NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
    
    • To get your Supabase URL:
      • create an account on https://supabase.io/,
      • create a new project,
      • go to Settings > API > Config > URL
      • the anon key is on the same page, under "Project API keys"
    • run npm run dev to start the local server and run the app

Key Learnings 🧐

(Back to top ⬆️)

  • Collaboration with a product owner
  • Organizing architecture for a bigger in scale product and managing tasks within a larger team.
  • Code modularization and code reusability
  • Learning to use Supabase with Next.js for the backend.
    • More profound understanding of asynchronous code
    • Using states more efficiently and only when needed
  • Learning Tailwind CSS
    • understanding how CSS customization works with the use of a framework
    • adapting the framework to our needs
  • Debugging code, tracing code paths and refactoring code for optimization purposes

Additional Features ⌛

(Back to top ⬆️)

There are a few features we would have liked to implement if we had more time. These include:

  • Implement the Resources page:
    • this would be a space for teachers to upload material they usually hand out to the students after they have completed a course
    • filtering the material by tag, as well as a search option
  • Implement the Progress page:
    • here, the user could find all their logged hours
    • budge system: the user is awarded a certificate based on completed hours

Further Information 🔗

(Back to top ⬆️)