Portfolio Project powered by Telia

Creating an E-Shop

Closeup Photo of Three Person Looking at Macbook Air

This group assignment is tailored for junior back-end, front-end, and QA specialists. The objective is to collaboratively create a simple, functional e-shop while honing essential teamwork and collaboration skills.

Goals:

  • Teamwork and Collaboration. You will learn to communicate effectively, manage version control, and integrate different parts of a project seamlessly.
  • Real-World Experience. By developing an e-shop using Java, React, and MySQL, you will gain hands-on experience with technologies commonly used in the industry. You’ll also understand the importance of unit testing and quality assurance.

By completing this assignment, you will have a comprehensive understanding of how to work as a cohesive team to build a functional e-shop, and get equipped with practical skills and experiences for your future career in the tech industry.

Create an e-shop based on the provided requirements and design sketches using Java, React, and a MySQL database. A link to download the sketches can be found in the “Supporting Material” tab.

Project Requirements

1. Functional Requirements:

  • Main E-shop Page:
    • Display all e-shop products on the main e-shop page “Mobile phones and accessories”.
  • Product card:
    • Brand
    • Title
    • Picture
    • Color
    • Price
    • Short description
    • Stock availability
    • Order button
  • Filters:
    • Implement filters to sort products.
  • Lead Form:
    • Products should be ordered via a Lead form.
    • Validation added to all fields.
  • Order Confirmation:
    • Send a confirmation email after a successful order and reduce the stock by 1.
    • Prevent orders for products that are out of stock.

2. Optional Features:

  • Login/registration functionality.
  • Next.js Server-side rendering for better SEO.
  • Checkout process.
  • Backoffice for product and order management.
  • Hosting on AWS.

Team Responsibilities

Front-End Developer:

  • Ensure the pages are responsive (mobile-first approach), with some elements not visible or shown differently on smaller devices.
  • Ensure the website looks the same across different browsers.
  • Use styled-components, CSS modules, or another CSS-in-JS solution.
  • Achieve a Lighthouse score of over 90.
  • Write unit tests for React components using a testing library such as React Testing Library.
  • Ensure accessibility standards are met (e.g., ARIA roles, keyboard navigation).
  • Implement client-side form validation in the Lead form.

Back-End Developer:

  • Build microservice (BFF) which provides these capabilities:
    • [Product API] Get product details to present in front-end.
    • [Stock API] Get available stock and managed availability.
    • [Order API] Create order if there is available stock.
    • [Event API] Register events which will happen in the system: order created, email send and etc.
  • Create data base to store products details, stock, orders details, evets and user details.
  • [Event Orchestrator] Create miroservice which monitors events, sends confirmtion email when the order is created, register event when email is send.
  • Implement logging so it would be possible to trace system behavior over the time.
  • Write unit tests for Java microservices using a testing framework such as JUnit.

Extend microservice with capability:

  • [User API] Manage users.

QA Engineer:

  • Create Test Cases.
  • Test Matrix (mapping test cases to specific requirements).
  • Identify and register bugs.
  • Retest bugs after they are fixed.
  • Create manual/documentation for end user.

Collaboration and Integration:

  • Communication: Maintain regular communication through meetings or a team chat to ensure all parts of the project are aligned.
  • Version Control: Use a shared Git repository for version control. Ensure all team members push their code to branches and create pull requests for code reviews.
  • Documentation: Each team member should document their code and provide setup instructions in the README file.

Architecture:

1. The task should be carried out by groups of mentees, including Front-End (FE), Back-End (BE), and Quality Assurance (QA) team members. Head to Women Go Tech Community Slack to find your teammates.

2. Suggested completion time is 2 months.

3. Set up development environment using Git, Docker , GitHub, IntelliJ.

Design Sketches

Design sketches can be found here (Password: grit-gap-groove-prove).

Recommended Reading