Emil S.D

Personal blog & portfolio

Project Marketmate

Project Marketmate

December 4, 2023
Emil S. D

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

notion image
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

  1. Data Collection: Gathering grocery data with Node.js.
  1. Data Storage: Storing the data in a JSON file on GitHub.
  1. Building the Website: Developing the user interface using Nuxt.js, Pinia, and Tailwind CSS, with a focus on behavior testing.
  1. Integrating Back-End: Using Nuxt Nitro for server-side operations.
  1. Retrieving Data: The RESTful API fetches grocery data from GitHub for display on the website.
  1. Launching the Website: Deploying the website on Vercel for public access.
notion image
notion image