Where To Mug

Table of Contents

1. Introduction
2. Demo
3. Tech Stack
4. Documentation
   • Folder Structure
5. Run Locally
6. Deployment
7. Environment Variables
8. API Reference
9. Acknowledgements
10. Feedback
11. Authors

Introduction

Ever wonder which tutorial room is free* and which is not? 🤨

This tool could help you find out your dream tutorial room 🥳

Search which tutorial room is free by:

• day of the week
• room name
• time slot
• cluster

The website is mobile respondsive too!!

Link to website: https://wheretomug.ml/

Demo

Tech Stack

Client: NextJs, ChakraUI

Server: NextJs API routes, Vercel

Others: EmailJs, SentryIO

We used EmailJs to collect feedbacks and SentryIO to log errors encountered by users.

Documentation

Folder Structure

    which-room-free/
    ├─📁 data
    │ ├─ rooms_with_cluster.json        //Rooms with cluster info
    │ ├─ room_ids.json                  //Rooms with IDs info
    │ ├─ room_occupancy.json            //Rooms with occupancy info
    ├─📁 public
    │ ├─📁 assets
    │ │ ├─ room_not_found_image.svg     //Svg image for room not found
    │ │ ├─ study_modal_image.svg        //Svg image for intro modal
    ├─📁 src
    │ ├─📁 components
    │ │ ├─ ScrollToTop.js               //Scroll to top button
    │ │ ├─ DisclaimerModel.tsx
    │ │ ├─ Feedback.js                  //Feedback form
    │ │ ├─ FilterOptions.tsx            //Room filter
    │ │ ├─ FreeRoomCard.tsx             //Individual room card
    │ │ ├─ FreeRoomsCardList.tsx        //List of room cards
    │ │ ├─ Main.tsx                     //Component for main page
    │ │ └─ RoomNotFound.tsx             //Room not found component
    │ ├─📁 pages
    │ │ ├─📁 api
    │ │ │ └─ index.js                   //API to filter rooms
    │ │ └─ index.tsx                    //Main page
    │ └─ theme.tsx                      //Styling for the website
    └─README.md

Run Locally

Clone the project

  git clone https://github.com/OkkarMin/where-to-mug

Go to the project directory

  cd where-to-mug

Install dependencies

  npm install

Start the server

  npm run dev

Deployment

3 step process to deploying the site properly on vercel

• Fork this repository into your own GitHub account.
• Using vercel, deploy the repository. Learn how to deploy on vercel
• Put in the following enviornment variables. Learn how to add env variables on vercel

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

EMAILJS_TEMPLATE_ID

EMAILJS_USER_ID

EMAILJS_SERVICE_ID

SENTRY_SERVER_INIT_PATH

SENTRY_UR

SENTRY_ORG

SENTRY_PROJECT

SENTRY_AUTH_TOKEN

API Reference

Get filtered rooms

  GET /api?currentDay=${currentDay}&timeSlot=${timeSlot}&searchText=${encodedSearchText}&cluster=${cluster}

Parameter	Type	Description
currentDay	string	target day
timeSlot	string	target timeSlot
searchText	string	target Room
cluster	string	target cluster

Acknowledgements

• Kenrick95 for the rooms data
• Raymond for the project idea
• Kyle for improvement suggestions
• JiaYin for helping test and provide ui related feedback

Feedback

If you have any feedback, please raise an issue in this repository

or

Write in to us using the feedback from, located at the bottom right of the website

Authors

• YingSheng
• OkkarMin