/pdpProject

A project that is part of my personal development plan at Agile Actors.

Primary LanguageTypeScriptMIT LicenseMIT

pdpProject

Watch the video

click the image above to see the demo

This project is part of my personal development plan at Agile Actors. My aim is to use technologies and practices that I am not familiar with in order to build an e-commerce site and futher develop my professional skills.

One of the major aims of this project is to set up the toolchain from the scratch, in order to familiarise myself with the whole process of creating an application, rather than writing code on top of a pre-configured development environment.

Stack

  • React
  • Material-UI
  • Redux, redux-saga, redux toolkit
  • Webpack 5
  • Babel
  • Typescript
  • Next 11
  • Apollo
  • GraphQL
  • Jest and React Testing Library

Points of interest

  • Project and toolchain set up from zero, no forks of premade projects, no create react app.
  • Mobile first design
  • Apollo server introspection script for generating server schema on the front end
  • Github pipeline
  • DUCKS folder structure
  • Husky pre-commit hooks
  • SEO, OpenGraph protocol implementation and structure data mark up
  • Mark up validated by W3C mark up validator
  • Accessibility validated by WAVE validator
  • ADR folder detailing architectural decisions
  • Detailed development diary with daily entries for each development day, the problems I encountered, the driving factors behind my decisions and my thoughts during each step of the way

How to deploy locally

  • Clone this repository
  • Install the dependencies by running yarn
  • In two separate terminal instances run yarn startServer to start the mock back end server and yarn dev to start the front end client.
  • The front end should be deployed at http://localhost:3000/ and the back end at http://localhost:4000/ (check the terminals to make sure these are the ports)