As part of the Bright Network 12-week Full-Stack Bootcamp, our group worked on a front-end project that involved developing a ReactJS interface for a previously created back-end project that utilized Java (Spring Boot) and a PostgreSQL database. The goal was to demonstrate our proficiency in working with an unseen API and to consolidate our understanding of full-stack development.
Our project, a doctor appointment booking system, allows doctors to easily manage their appointment schedules by booking, canceling, and updating appointments. Both doctors and patients can log in to view upcoming appointments, making the system efficient and user-friendly. It was developed using HTML, CSS, and ReactJS for the front-end, while the back-end relied on Java (Spring Boot) and a PostgreSQL database.
What did I learn?
- How to plan and develop an application and use HTML, CSS and ReactJS to develop a booking system application
- How to use GitHub for collaboration (using branches and dealing with merge conflicts)
- Connecting an external Java (Spring Boot) back-end to a React front-end
- How to structure a React application to ensure states are at a suitable level within the app with the aim of minimising prop-drilling whilst still allowing access to states where needed
- The use of conditional rendering to show certain buttons or pages in different scenarios
- The use of React Hooks (UseEffect, UseState)
- The use of SessionStorage to keep track of logged-in user
- The use of ReactRouter to create a multipage React App
- The importance of developing the back-end with the front-end application in mind
- Security issues arising from using the url as a means of holding user information
- The use of CSS Flexbox, Grid and Media Queries to create a responsive web application (including a collapsing navbar menu)
- How to use the various input types within HTML forms (date, time etc.)
