Purpose of the project
Two of us worked on the project. My partner and I, both students of the bootcamp with similar levels of knowledge.
After finishing the bootcamp, we wanted to create a project as close as possible to a real-world website. We decided to create an online store selling tourist guides around the city of Sarajevo. The content is real, the guides are not.
The requirements were: React, React Router, and Firebase as the backend for data and Auth. During the process, we used and learned more about VSC, Vite, EsLint, Prettier, GitHub, and Netlify.
Learning to work as a team and without guidance.
My role in the project
Using the Figma app, I created the design and UI.
Subsequently, I analysed the design to translate it into HTML and CSS, structured the project in VSC, researched how to connect with Firestore. Read the documentation, learned, and wrote the code.
Except for the CSS reset part, all the code has been written by me. It was a promise not to copy anyone's code, but to read the documentation on MDN and figure things out myself. Surely that's why there are beginner mistakes, but the website works well and I have learned a lot.
Web stack and explanation
Workspace: Visual Studio Code. Vite with EsLint and Prettier plugins.
Figma: Design, UI, and UX.
CSS: The transformation of the design into a real app was done using modern CSS APIs. For layout, I used flexbox and grid and also container query, which was really fun to learn and use. Some experimentation with clip-path and CSS variables.
React Router: Relative routes, nested routes. Loading nested routes by default in outlet using index. Query parameters for data filtering, useLocation to capture the route. Link, NavLink for links. isActive in NavLinks. useNavigate for redirection if the user is not authenticated, etc...
React: Reusable components, props. Use of conditional rendering. Form control with state through value and onChange. useEffect for network requests and some other opportunities. useState, useRef. React context in two places, one for storing data and the second for the shopping cart.
Firebase: Connection with Firestore. Initialising the app, obtaining data collection from forms. Given that the dataset is very small, I loaded everything at once and in a react context. Surely in a more serious application, the data would be downloaded from firebase as needed by filtering in getDocs(). Authentication, logging in with email and password, and onAuthStateChanged listener to allow the registered user to enter the protected area (routes). Logging in and out.
Netlify: Connection of my React form, Redirection rules for pushState in React. Continuous deployment through GitHub.
Extras: reactMarkdown, vite-plugin-svgr
Git: Commits, Branches, Merge, Restore, push
