loading...

Livetable

himanshuc3 profile image Himanshu Updated on ใƒป2 min read

What I built

This is a common room timetable building PWA in which people who have common problems to solve can decide how to allocate time synchronously. For example, suppose a tuition group have a group of students with different schedules trying to set the optimal time to take their common tuition classes. They can go to this app, make there own room and then arrange their timetable. I intend to build a ton of more features in it but right now due to end term exams I'm afraid this is my entry.

Demo Link

Project is deployed on heroku: https://mysterious-beach-92009.herokuapp.com/

Note: Features like responsive design, UI design, loading animations, custom features related to timetable manipulation have not been added till now.

Link to Code

GitHub logo himanshuc3 / LiveTable

Realtime Timetable scheduling. Could be used by freelancers :)

LiveTable

Realtime Timetable scheduling. Could be used by freelancers.

Deployed on: https://mysterious-beach-92009.herokuapp.com/

How to Contribute

  1. Fork and Clone the project.
  2. Install the dependencies. There are 2 package.json files - 1 for node/express server and 1 for react app. npm i in root folder. Then cd into client and again npm i packages.
  3. Run npm run dev on cmd to run express server and react server concurrently - proxy implied.

NOTE: react server runs on localhost:3000 and express server runs on http://localhost:5000.

Tech Stack

React, Express.

Redux, cors, redux-thunk etc.




Note: Ton of refactoring left to be done!!!

How I built it (what's the stack? did I run into issues or discover something new along the way?)

MERN Stack:

Front End - React
Front End libraries - moment, cleave.js, nuka carousel, rodal, react-timetable-events
Back End - Node, Express
Realtime Communication achieved through - pusher๐Ÿ˜

Note: Mongo not integrated right now as right now its a demo app and I didn't have much time too. But surely OAuth will come into play and so will mongo.

Issues I came across:

  1. Setting up MERN stack: I've worked with React and Express before. But not combined. Managing two different servers, 1 for react and 1 for Express was a little tricky and challenging at the started, but I conquered it. Thanks to this challenge for that.
  2. Research: I first tried building my own scheduler. Failed. Tried another one quickly. Failed. And 3 more tries later found the correct library. Lesson: Research saves a ton of time.
  3. Pusher: It was really hard..... Nah, I was kidding. Pusher integrated smoothly. Hardly wrote 5-6 lines for integration.

Additional Resources/Info

Additional Resources:

  1. Found the website undraw.co during development. There were some pretty sweet illustrations there.
  2. Bootstrapping an idea is easier than I thought. Some hickups, but I take them with both hands open.

Posted on by:

himanshuc3 profile

Himanshu

@himanshuc3

Believes in positivity ๐Ÿง˜โ€โ™‚๏ธ. And cricket ๐Ÿ. And just living and learning ๐Ÿ˜‡.

Discussion

pic
Editor guide
 

Well done! How was working with React-timetable? I used fullcalendar in my app, but the styling can be difficult.

 

i struggled with styling too. Maybe after end terms i could revamp the look of the site.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Nice