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
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
- Fork and Clone the project.
- Install the dependencies. There are 2 package.json files - 1 for node/express server and 1 for react app.
npm iin root folder. Thencdinto client and againnpm ipackages. - Run
npm run devon 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:
- 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.
- 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.
- Pusher: It was really hard..... Nah, I was kidding. Pusher integrated smoothly. Hardly wrote 5-6 lines for integration.
Additional Resources/Info
Additional Resources:
- Found the website undraw.co during development. There were some pretty sweet illustrations there.
- Bootstrapping an idea is easier than I thought. Some hickups, but I take them with both hands open.
Top comments (3)
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.