Mock-Webshop
Mock-Webshop
Mock-Webshop
Overview
This is a school project I worked on as part of a team where we developed our first "real" React application, a mock e-commerce site using React (Vite). As our initial venture into live React development, our primary focus was on implementing and adapting the core functionalities of the application. The design, including styling with Tailwind CSS, was integrated after establishing the main features.
This is a school project I worked on as part of a team where we developed our first "real" React application, a mock e-commerce site using React (Vite). As our initial venture into live React development, our primary focus was on implementing and adapting the core functionalities of the application. The design, including styling with Tailwind CSS, was integrated after establishing the main features.
Category
Category
Category
Frontend development,
React
Role
Role
Role
Frontend developer, UI designer
Year
Year
Year
2024
Process
Design Process
Functionality First: Our initial focus was on implementing core functionalities and adapting them as needed. Design considerations were addressed once we had a working application.
Designing in Figma: After completing the core functionalities, I contributed to designing the application’s wireframes and mockups in Figma. This phase focused on visual elements like colors, typography, and layout to enhance user experience (UX).
Styling with Tailwind CSS: We chose Tailwind CSS for styling the application. This utility-first CSS framework allowed us to quickly and efficiently apply responsive design and modern aesthetics to our application.
Key Features
In this project, we focused on delivering the essential functionalities for a simulated e-commerce experience:
Product List: We developed a page to display a list of products fetched from an API. This involved retrieving product data and managing cart functionality using state and local storage.
Product Details: We created a detailed product page accessible via route parameters to provide comprehensive information about each item.
Add to Cart: Users can add products to a shopping cart.
Cart Overview: The cart page allows users to view their cart, modify quantities, remove items, and proceed to a simulated checkout process.
Order Confirmation: We designed a confirmation page that summarizes the purchase, though no actual payment processing is involved.
Product Filtering: We added functionality to filter products by category.
Pagination: We incorporated pagination into the product list page to enhance user experience.
Design Process
Functionality First: Our initial focus was on implementing core functionalities and adapting them as needed. Design considerations were addressed once we had a working application.
Designing in Figma: After completing the core functionalities, I contributed to designing the application’s wireframes and mockups in Figma. This phase focused on visual elements like colors, typography, and layout to enhance user experience (UX).
Styling with Tailwind CSS: We chose Tailwind CSS for styling the application. This utility-first CSS framework allowed us to quickly and efficiently apply responsive design and modern aesthetics to our application.
Key Features
In this project, we focused on delivering the essential functionalities for a simulated e-commerce experience:
Product List: We developed a page to display a list of products fetched from an API. This involved retrieving product data and managing cart functionality using state and local storage.
Product Details: We created a detailed product page accessible via route parameters to provide comprehensive information about each item.
Add to Cart: Users can add products to a shopping cart.
Cart Overview: The cart page allows users to view their cart, modify quantities, remove items, and proceed to a simulated checkout process.
Order Confirmation: We designed a confirmation page that summarizes the purchase, though no actual payment processing is involved.
Product Filtering: We added functionality to filter products by category.
Pagination: We incorporated pagination into the product list page to enhance user experience.
Workflow and Methodology
Team Collaboration: As this was our first real React project, we assigned a Scrum Master to coordinate our tasks and manage the timeline. We used GitHub Projects to organize our work and followed an agile approach with regular meetings and progress updates.
Version Control: We employed Git for version control, setting up a GitHub repository, managing feature branches, and ensuring clear commit messages to track our development process.
Deliverables
Functionality: The final product includes a functional application with a product list, product details page, cart functionality, and a simulated order confirmation page.
Design and Styling: Post-functionality implementation, we created responsive wireframes and mockups in Figma, and applied styling using Tailwind CSS to achieve a cohesive and modern look across various devices.
Code Quality: Our codebase is clean and maintainable, with regular commits and clear messages. We conducted code reviews and used branches and pull requests effectively.
Project Standards
Individual Contributions: Each team member contributed at least one feature, with contributions tracked via GitHub.
Technologies: We used Vite for development, react-router-dom for routing, and Tailwind CSS for styling. The project was published on Netlify, and we maintained a consistent CSS methodology throughout.
Responsiveness: The application was designed to be responsive from mobile to larger laptop screens, consistent with the design specifications.
Workflow and Methodology
Team Collaboration: As this was our first real React project, we assigned a Scrum Master to coordinate our tasks and manage the timeline. We used GitHub Projects to organize our work and followed an agile approach with regular meetings and progress updates.
Version Control: We employed Git for version control, setting up a GitHub repository, managing feature branches, and ensuring clear commit messages to track our development process.
Deliverables
Functionality: The final product includes a functional application with a product list, product details page, cart functionality, and a simulated order confirmation page.
Design and Styling: Post-functionality implementation, we created responsive wireframes and mockups in Figma, and applied styling using Tailwind CSS to achieve a cohesive and modern look across various devices.
Code Quality: Our codebase is clean and maintainable, with regular commits and clear messages. We conducted code reviews and used branches and pull requests effectively.
Project Standards
Individual Contributions: Each team member contributed at least one feature, with contributions tracked via GitHub.
Technologies: We used Vite for development, react-router-dom for routing, and Tailwind CSS for styling. The project was published on Netlify, and we maintained a consistent CSS methodology throughout.
Responsiveness: The application was designed to be responsive from mobile to larger laptop screens, consistent with the design specifications.
Conclusion
This project represents our first real-world experience with React, focusing on adapting core functionalities before delving into design. The experience allowed us to apply fundamental React concepts, agile practices, and version control techniques. By integrating Tailwind CSS, we achieved a modern and responsive design, showcasing both our technical capabilities and our ability to adapt to real-world development challenges.
This project represents our first real-world experience with React, focusing on adapting core functionalities before delving into design. The experience allowed us to apply fundamental React concepts, agile practices, and version control techniques. By integrating Tailwind CSS, we achieved a modern and responsive design, showcasing both our technical capabilities and our ability to adapt to real-world development challenges.