https://github.com/pernillasterner/final-project-mobile-recycle-app

A e-com store for used mobile phones of different brands
https://github.com/pernillasterner/final-project-mobile-recycle-app

api css3 figma html5 jacascript pair-programming project-planning react-router reactjs redux-toolkit supabase-db ui

Last synced: about 1 month ago
JSON representation

A e-com store for used mobile phones of different brands

• Host: GitHub
• URL: https://github.com/pernillasterner/final-project-mobile-recycle-app
• Owner: pernillasterner
• Created: 2023-11-27T19:45:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-09T15:59:06.000Z (about 1 year ago)
• Last Synced: 2024-11-05T15:43:37.847Z (3 months ago)
• Topics: api, css3, figma, html5, jacascript, pair-programming, project-planning, react-router, reactjs, redux-toolkit, supabase-db, ui
• Language: JavaScript
• Homepage: https://technigo-project-techcycle-app.netlify.app/
• Size: 5.18 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

# TechCycle - Final Project for Technigo's React/Redux Upskill Course

Developers: [Pernilla Sterner](https://github.com/pernillasterner), [Sebastian Tigerschiöld](https://github.com/Seti108)

## Planning

We divided the project into 4 sprints and started with 2 days of planning:

- Brainstorm the concept for the app to include Agenda 2030 goal

- Planning the overall structure

- Creating a design mockup

- Research Supabase documentation

- Deciding the flow of the app

- Filestructure

- Diving into componentes

- Planning routes

- Planing global and local state

## Execution

We started off pairprogramming where we set naming conventions for classes, splitting up the first sections (header, footer, hero, productlist and filter) and going through z-index, naming of divs, layout structure. Setting basic styling.

After that was done, we created a backlog of tasks that we could split between us.

## Challenges

Getting the filter working as expected took quite a while as we needed several filters to be active at the same time and some parts required the help of external libraries to work smoothly, like the range slider. Bringing it all into the global store was a great challenge.

The modal we created for selling phones also had it's challenges where the flow was built as a multi-step form where everything was saved in the Redux state and then sent to our backend. Getting the multi-step format to work required some thinking regarding conditional rendering as well as error handling and input validation.

## View the project live

[https://technigo-project-techcycle-app.netlify.app/](https://technigo-project-techcycle-app.netlify.app/)

## If you want to fork the project, follow the steps below

1.  Clone the repository to your local machine.

2.  Install the required dependencies using `npm install`.

3.  Start the development server using `npm run dev`.

## Tech

- Front end: React, Redux/Redux Toolkit

- BaaS: Supabase

- Build tool: Vite

- CSS Preprocessors: Sass, PostCSS(Autoprefixer)

- Range Slider Component: rc-slider