Project Overview and Documentation
What is the Project About?
This project is about creating a website that helps people in Denmark find and compare groceries from different stores. It's like a shopping assistant that lets users see prices, locations, and other details to make shopping easier and more informed.
How We're Building It
This website is being developed using a combination of different technologies and tools, each contributing to its overall functionality.
Development Approach: Test-Driven Development (TDD)
- Test-Driven Development (TDD): A method where tests are written before the actual code. It focuses on testing early in the development process to ensure the final product works as expected.
Front-End Development
- Nuxt.js: The main framework for creating the user interface.
- Pinia: Manages the website's state, like user choices and actions.
- Tailwind CSS: Used for the design of the website, ensuring it is visually appealing and easy to use.
- In the front-end development, there will be an explicit focus on behavior testing, emphasizing how the website behaves from a user's perspective, rather than focusing solely on the implementation details.
Back-End Development
- Nuxt Nitro: Handles server-side tasks, like processing data requests.
Testing Framework
- Playwright: Used for end-to-end testing, along with unit and integration tests.
Data Management and Storage
- Node.js: Collects grocery data from different sources.
- GitHub: Stores the data in JSON format and hosts it.
- RESTful API: Allows the website's front-end to communicate with the back-end, managing data requests and transfers.
Hosting and Deployment
- Vercel: Hosts the website, making it accessible to users online.
Workflow Steps
- Data Collection: Gathering grocery data with Node.js.
- Data Storage: Storing the data in a JSON file on GitHub.
- Building the Website: Developing the user interface using Nuxt.js, Pinia, and Tailwind CSS, with a focus on behavior testing.
- Integrating Back-End: Using Nuxt Nitro for server-side operations.
- Retrieving Data: The RESTful API fetches grocery data from GitHub for display on the website.
- Launching the Website: Deploying the website on Vercel for public access.
