Online Marketplace for Handmade Crafts

Objective:
You will be building an Online Marketplace for Handmade Crafts Service
Application using React (Frontend), Spring Boot Microservices (Backend), and
MySQL (database).
Project Overview:
An online marketplace for handmade crafts web application is a platform that
connects artisans and crafters with customers who are looking to purchase
unique and handcrafted products. It provides a digital space where artisans can
showcase their creations, and customers can browse, purchase, and support
independent crafters.
Key features of Online Marketplace for Handmade Crafts Application
typically include:
User Registration: Users can create an account on the platform, either as
artisans or customers. They provide their basic information such as name, email
address, and password. This account will be used to access the various features
of the application.
Artisan Profile Creation: Artisans can create a profile that showcases their
brand, story, and the types of crafts they specialize in. They can upload images
of their products, provide descriptions, pricing information, and specify
shipping details.
Product Listings: Artisans can create individual listings for each of their
handmade crafts. They can include high-quality images, detailed descriptions,
materials used, dimensions, and pricing for each product. They may also have
the option to categorize their products into different sections or collections.
Search and Browsing: Customers can search for specific crafts or browse
through different categories, such as jewelry, home decor, clothing, or
accessories. They can use filters to narrow down their search based on price
range, location, or other specific criteria.
Shopping Cart and Checkout: Customers can add items to their shopping cart
while browsing and continue shopping until they are ready to make a purchase.
The web application will provide a secure and convenient checkout process
where customers can review their order, enter shipping information, and make
payments.
Payment Processing: The web application will handle the payment processing,
allowing customers to make secure transactions using various payment
methods, such as credit/debit cards, digital wallets, or other online payment
systems. The platform may charge a commission or transaction fee for each sale
made.
Order Management: Artisans can manage their orders through the web
application. They can view and track incoming orders, mark orders as shipped,
provide shipping notifications, and communicate with customers regarding any
inquiries or special requests.
Reviews and Ratings: Customers can provide feedback and reviews for the
crafts they purchase, helping to build the reputation and credibility of artisans
on the platform. These reviews can assist other customers in making informed
decisions and encourage artisans to maintain high-quality products and services.
Messaging and Communication: The web application may offer a messaging
system that allows customers and artisans to communicate directly. This can
include inquiries about products, custom order requests, or any other questions
related to the crafts.

DAY 1: Creating the login and registration forms using React

Phase 1: Create a UML use case diagram to represent the different actors and
their interactions with the system. Use arrows to show the relationships and
dependencies between the actors and use cases for the complete case study
mentioned above.
• Set up the environment according to the application needs.
• Set up a new React project using Create React App or your preferred
method.
• Create basic (UI) forms for registering and logging in a user using react.
Give specific endpoints for the two forms.
• After registration, make the login page functional, i.e.it should redirect
the user to the home page (blank as of now). In case of error in any of the
credentials, the appropriate error must be displayed.
 • In the process, make sure that the user is added to the database and the
form reloads on submission and clear errors upon successful
registration/login.

DAY 2: Getting user data into Global state and creating app components
• Use Redux to make user data available on global state. This will pass the
props from parent to grandchild components without having to pass the
props through all child components. • Design page header component
and side panel
• Use React Router for navigation.
• Create navigation section of the header page which includes icons and
log-out functionality

DAY 3: Create and design homepage component

• The homepage of any website serves as the default page of that website.
That is reason enough for the homepage to be really expressive as well as
creative.
• Include a footer section with links to important pages, such as terms and
conditions, privacy policy, FAQ, and contact information.
• Include social media icons or links to encourage users to follow your
website on various social platforms.

DAY 4: Design other components

• Create and design all other necessary components.

• To attain reusability, pass parameters (referred to as props in React.js) to
your functional component.

DAY 5: Adding more functionality to the application

• You can also use React Context API to share data values between
components without having to pass a prop through every level of the
app tree.
• Add more functionality to the application.
DAY 6: Design the database schema

• Determine the entities and relationships required for the application.

• Create the necessary tables and define the relationships between
them.

DAY 7: Set up the backend with Spring Boot

• Create a new Spring Boot projects using your preferred IDE.

• Set up the project dependencies, including Spring Web, Spring Data
JPA, and any additional dependencies required for your database
(e.g., MySQL).
• Configure the database connection in the application.properties file.
• Create entity classes representing your database tables, with
appropriate annotations for mapping to the database.

DAY 8: Spring Boot CRUD operation implementation

• Implement repository interfaces using Spring Data JPA for database

operations for all the applications.
• Create RESTful APIs using Spring Web to handle CRUD operations
for different entities.
• Create APIs for all other functionality which is required for the
application.

DAY 9: Implement Spring security

• Add authentication and authorization mechanisms to secure your APIs,
• Make use of JSON Web Tokens (JWT) or OAuth 2.0.

DAY 10: Implement security measures:

• Implement user registration, login, and session management
functionalities.
• Make sure you build a secure application.
DAY 11: Build microservices architecture
• Identify different microservices within your application.
 • Create separate modules or projects for each microservice.
• Implement business logic and functionality within each microservice.
• Set up database connections for each microservice using Spring Data JPA
or your preferred method.
• Implement RESTful APIs for each microservice, focusing on specific
functionality

DAY 12: Setup Service Discovery and Communication

• Choose a service discovery mechanism like Netflix Eureka
• Configure service registration and discovery within each microservice.
• Implement communication between microservices using RESTful APIs
or messaging queues.

DAY 13: Implement API gateway with Spring Cloud Gateway

• Create a new Spring Boot project for your API Gateway.
• Include the Spring Cloud Gateway dependency.
• Configure the API routes, load balancing, and routing rules in the API
Gateway project.

DAY 14: Set up messaging with RabbitMQ

• Configure RabbitMQ connection details in each microservice project.
• Define message queues, exchanges, and bindings for the communication
between microservices.
• Implement event producers and consumers within microservices to
publish and consume messages.

Day 15: Integrate frontend with microservices via API Gateway •

Connect the frontend components with the API Gateway.
• Implement API calls to interact with the API Gateway using libraries like
Axios.
• Make HTTP requests to the API Gateway routes, which will route the
requests to the appropriate microservices.
• Handle responses and update the UI accordingly.
DAY 16: Implement additional features
• Design and implement features like search functionality, filters, sorting,
and pagination for product listings.
• Implement features like user reviews, ratings, and order tracking.
• Integrate Stripe payment in your React application.
• Make application more creative and attractive by adding more features.
• Give a new name to your application and make a new logo for it

DAY 17: Write test cases • Identify the critical paths and
functionalities in your application.
• Write unit tests for each microservice to verify the behaviour of
individual components.
• Use testing frameworks like JUnit to write the test cases.
• Mock external dependencies using tools like Mockito to isolate the
components under test.

DAY 18: Test and debug

• Consider writing end-to-end tests to simulate user interactions and verify
the overall system behaviour.
• Execute the written test cases and verify that they pass successfully.
• Debug any failures or unexpected behaviours and fix the issues in the
code.
• Conduct integration testing to verify the communication between
microservices and the API Gateway.
• Debug and fix any issues that arise during testing.
Day 19: Dockerizing Spring Boot (Microservices) App and deployment
• Build Docker images for each of your microservices and the API
Gateway.
• Create a Dockerfile in each microservice and API Gateway project to
define the image build process.
• Include all necessary dependencies and configurations in the Docker
images.
 • Push the Docker images for your microservices and API Gateway to the
container registry (Docker hub).
• Log in to the AWS Management Console and navigate to Amazon ECS.
• Create a new ECS cluster that will host your Docker containers.
Day 20: Deploy the Microservices, API Gateway, and RabbitMQ
• Create an ECS task definition and ECS service for each microservice and
the API Gateway.
• Setup load balancing by creating an Application Load Balancer (ALB) in
AWS
• Configure the ALB to distribute incoming traffic to your microservices
and API Gateway.
• Set up listeners and target groups to route requests to the appropriate ECS
services.
• Create security groups to control inbound and outbound traffic for your
ECS instances.
• Use the AWS Management Console or the AWS Command Line Interface
(CLI) to deploy your ECS services.
• Create ECS service tasks based on the task definitions you created earlier.
• Monitor the deployment process and ensure that the tasks are running
successfully.
Congrats!!! You have successfully built and deployed Online
Marketplace for Handmade Crafts Service application.