-
-
calendar user interface
-
Database for calendar
CalendRHer
Demos
Live Demos
Inspiration
Since there are many activities in Hall, we thought it would be nice to allow users to keep track of them in a unified calendar/itinerary. This project aims at creating a unified solution to helping students keep track of all their activities, whether it be hall, academics, or anything under the sun.
What it does
- Shows list of activities that the user has signed up for
- Allow users to join events (adds the user to the list of participants to the event and adds the event to the list of events participated by the user)
- Add activities to the users' schedule
How we built it
- Frontend: React with Typescript
Backend: Python with Flask and MongoDB
For the Frontend, we used Material UI and styled components to build the basic components, using a mix of Redux and axios to handle state management and API calls to the backend, and react-final-form to handle form validation of adding new activities.
We uploaded everything onto Github and deployed the code using Heroku, which receives instructions via Flask mod in Python to execute the various functions. We used MongoDB as our database to store information on the users and the events.
Challenges we ran into
- One of the challenges we faced is deploying to Heroku since we never learnt about it in RHdevs.
- The task, while simply at first has a lot more moving components that initially thought and turned out to be much more complex.
- Handling form validation to ensure clean data passes into the backend was a very lengthy task.
- CORS is a pain to work with
Accomplishments that we're proud of
Shawn: Spending more than 5 hours a day doing nothing but coding for 3 consecutive days
Chun Yu: Code is pain
What we learned
I learnt how data is transmitted between the user interface and database.
How to develop a project full stack from the ground up, and integrate them together.
What's next for the CalendRHer
- Create a distinction between the organiser and participants accounts which allows different functions in the calendar
- Allow imports of .ics using Mozilla's ical library to allow users to import NUSMods and Google Calendars to have a truly unified calendar solution
- Better integration of API calls.
Workflow
Product Workflow
- Frontend gets list of activities from backend
- After receiving the data, renders all the data onto a calendar
- On adding an event, frontend makes 2 API calls, one to add a new event to db, and one to join the event.
Technical Implementation
Optimizations
When it came to performance on the frontend, given that the project does not require complex and time consuming algorithms, the main bottleneck would be initial load time, hence it was important that the bundle size was reduced to a bare minimum. As such, I decided to use libraries such as Material UI (127kb after minizipped) over the larger Ant Design (350kb after minizipped) libraries. React-final-form was chosen over Formik and hook-form for form validation due to better integration to MUI, and we used nanoid for unique activity ID and axios for API calls since they were relatively small libraries, keeping the overall bundle size extremely small.
Log in or sign up for Devpost to join the conversation.