A desk booking system website

New team who shared a desire to learn and grow in web development.

Comment

Inspiration

We are a team of four second-year undergraduate computer science students and one postgraduate student, all driven by a shared passion for web development and a curiosity about React. Each of us had previously thought about learning React but found it challenging to approach alone. This hackathon provided the perfect environment to dive in together, support one another, and make learning React an enjoyable, collaborative experience.

What It Does

Our project is a web app designed to streamline desk booking and room availability checks in real-time. We aimed to provide users with a seamless experience by integrating a calendar feature, allowing them to view bookings alongside personal events. The app aimed to feature a modern design powered by Tailwind CSS and includes interactive elements like a calendar view and making desk reservations.

How We Built It

  • Frontend: React.js, Tailwind CSS, and FullCalendar for an interactive calendar view.
  • Backend: Node.js with Express to manage API routes, and MySQL for database management, storing booking and availability data.
  • GitHub: We used a shared repository, employed branches for independent work, and practiced code reviews and pull requests to ensure smooth collaboration.

Challenges We Ran Into

  • GitHub Management: For many of us, this was our first experience managing branches, resolving merge conflicts, and syncing with the main branch.
  • CORS Issues: Connecting the frontend and backend introduced CORS errors.
  • React Components: We encountered unexpected re-renders in React components, especially in forms. This experience helped us understand React’s lifecycle and rendering behavior.

Accomplishments That We’re Proud Of

  • Progress in React: Each team member advanced in React, learning to set up components, routes, and manage JSX and hooks.
  • Effective GitHub Workflow: We became more comfortable with GitHub, including branch management, pull requests, and code merging, which will be valuable in future projects.
  • Steady Project Development: We maintained a smooth development pace with no major setbacks, allowing us to gain confidence and enjoy the learning process.

What We Learned

  • Full-Stack Setup: We learned the basics of setting up a full-stack project, including frontend, backend, and database integration.
  • GitHub Essentials: We explored GitHub’s tools through terminal commands, VS Code GUI, and the website, covering repository setup, branching, pull requests, and conflict resolution.
  • API Integration: We created API routes in Express, handled HTTP requests with Axios, and managed data flow between frontend and backend.
  • React Fundamentals: We gained hands-on experience with components, routing, props, and state management, as well as React’s re-rendering process.
  • Tailwind CSS: Using Tailwind CSS allowed us to efficiently build a visually appealing app, and we learned how to leverage Tailwind UI for pre-made components.
  • AI as a Learning Tool: We explored how to use AI effectively for guidance, observing the importance of thoughtful prompting for better results.

What’s Next for Our Project

  • Feature Enhancements: Adding advanced filtering options, booking reminders, and visual floor plans for easier desk selection.
  • User Experience Refinement: Improving usability and visual design to create an even more user-friendly interface.

Built With

  • Frontend: React.js, Tailwind CSS, FullCalendar
  • Backend: Node.js, Express, MySQL
  • Other Tools: GitHub, Axios

Built With

Share this project:

Updates

Submission history