Lucas のポートフォリオ

1. App Description
2. System Architecture
3. Consumed Technologies, Tools and Dependencies
4. Installation
5. Managing the Source Code
6. Usage
    6.1. Functional features
    6.2. Non-functional features
    6.3. Screenshots of Modern Walk Clothes Store
7. Git Commit Strategy
8. Credits
9. License

Documentation

1. App Description -

This is a prototype web application built to showcase the use cases of a e-commerce clothing store. Engaging with end users in viewing flash sale deals, men's and women's clothing selections. This prototype web application consists of three web page,

Home page => Users can view the latest items with offers and redirect to the "Men's clothing" and "Women's clothing" web pages.
Men's clothing page => Users can view a selection of clothing items targeted towards men with the necessary item details, like name, image, price and description.
Women's clothing page => Users can view a selection of clothing items targeted towards women with the necessary item details, like name, image, price and description.

2. System Architecture -

Figure 2.1: System Architecture Diagram

This system operates with a flow od data using the Client/server architecture.

The Client-side, ReadJS app, request data from the Server-side Express (NodeJS) app through the REST API.
The Server-side app will query the data store (database) with the passed parameters and return the requests data as a response.
[The current project only contains the front-end, whereas the back-end and the database is handled by a third-party developer.]

3. Consumed Technologies, Tools and Dependencies -

Programming Languages -
- Client-side (Front-end) - ReactJS, Sass, TypeScript, TSX
Frameworks -
- Facebook's React using React Hooks
Tools - Visual Studio Code
Main Dependencies
- Axios - Allows to fetch data from an API service.
- React-icons - Icon library containing all the third-party icon packs.

4. Installation -

To run the front-end application, it's node modules are required.

To download the node modules, go to the project file directory via the command prompt (CMD) and run the below command =>

npm install

After the node modules are installed, to run the app, run the below command =>

npm start

5. Managing the Source Code -

Client-side app's source code is located in the following directory =>

Workspace -> wireapps-clothes-store-prototype

Source code structure =>

Figure 5.5: Client-side app Source Code Structure

6. Usage -

6.1. Functional features -

End users can view products from the flash sale on Men's and Women's clothing.
End users can view distinctive products by Men's and Women's clothing categories.
End users can view a properties of each clothing product, like,
- Title
- Image
- Price
- Description

6.2. Non-functional features -

Code Readability
Code Reusability
Code Maintainability
Code Scalability
Error Handling

6.3. Screenshots of Modern Walk Clothes Store -

6.3.1. Loading state example -

Figure 6.3.1.1: Home (Landing) page - Loading state example screenshot

6.3.2. Home (Landing) page -

Figure 6.3.2.1: Home (Landing) page screenshot

Figure 6.3.2.2: Home (Landing) page - Error state screenshot

6.3.3. Men's Clothing page -

Figure 6.3.3.1: Men's Clothing page screenshot 1

Figure 6.3.3.2: Men's Clothing page (cont.) screenshot 2

Figure 6.3.3.3: Men's Clothing page - Error state screenshot

6.3.4. Women's Clothing page -

Figure 6.3.4.1: Women's Clothing page screenshot 1

Figure 6.3.4.2: Women's Clothing page (cont.) screenshot 2

Figure 6.3.4.3: Women's Clothing page - Error state screenshot

7. Git Commit Strategy -

This repository contains two branches, "main" and "develop". During the development process of the source code and documentation, change commit were pushed to the "develop" branch. After a portion of the development was complete, it was reviewed and merged into the "main" branch. Changes were pushed as commits incrementally as shown in the table below,

Version	Commit Group
v1	Group 1 - Documentation
v1	Group 2 - Front-end

8. Credits -

This project was developed as a clothing e-commerce prototype website for the entry evaluation process at WireApps. This functional requirements were provided by WireApps.
The project was worked on using the best practices and guidance with the use of legitimate online documentation (docs) and YouTube videos.
Documentation and source code in this repository was developed by H.V.L.Hasanka.

Extended credits => Image credits

Clothes Store Prototype UI

Table of Contents