1. Project description:

• We were given by our client 'Hilodoble' the task to develop and redesign a new marketplace for their products.
• They need a website where the products can be listed.
• The user could potentially add any item to the shopping cart and go through the payment process. They also need a search bar to find the products they would like to purchase.
• Their website was created with Wordpress and were in need of an update. We, as developers, had total freedom to choose the most suitable frameworks and libraries.

2. User stories:

2.1 User Story (User):

• Being able to register in the app as user.
• See products' list.
• Filter products.
• Add products to shopping cart.
• Buy products.
• Search for products in the Searchbar.
• Read blog.
• Read static pages.
• Follow links to the associated shops where you could find some of the selected items from Hilodoble.
• Fill in the form from the contact page.

2.2 User Story (Admin):

• Enter app as admin.
• Add, edit and delete products.
• See website.

3. Fullstack Developer Team

• Beatriz de Avila - SCRUM Master
• Esther De Luque - SCRUM Master assistant
• Noa Trujillo Zamora - Product Owner
• Alesia Baldeon - Developer
• Alba Rus - Developer
• Natalia Palomo - Developer
• Paloma Babot León - Developer
• Elena Mª Pérez - Developer

4. Project Demo

5. Sketch

Sketch mobile

Sketch Desktop

6. Atomic Design

7. Mockup

Figma Mobile

Figma Desktop

Figma Desktop Admin

8. Stacks

• Frontend: HTML5, CSS3, SASS,REACT

• Backend: PHP Laravel, SQL, phpMyAdmin, node.

• Library: Bootstrap 5

Other tools:

• Figma
• Visual Studio Code
• Git
• Xamp
• Trello
• DrawSQL
• Planning Poker
• Zoom

9. Required:

NPM installed.

Axios npm installed.

PHP (Minimum, version 8.1).

React.js installed.

Composer & Laravel installed and updated to latest version.

XAMPP/LAMPP installed.

MySQL.

To install our project

Open Terminal

In the terminal run git clone command, an paste the HTTPS: https://github.com/Albaric0que/hilodoble.git

Open XAMPP or LAMPP.

Login to phpMyAdmin and create a new database named hilodoble

Go to the Back folder with the cd back command and type the ss command in the terminal.

Type in the IDE terminal: php artisan migrate:fresh --seed and press intro.

Type in the IDE terminal: npm run dev and press intro. Then open another terminal in the IDE without closing the previous one

Type in the IDE terminal: php artisan migrate and press intro

Type in the IDE terminal: php artisan serve and press intro.

To install the JWT library you have to pass the following commands in back:

1. composer require tymon/jwt-auth
2. php artisan jwt:secret

An .env file (in the form of a little wheel) will be downloaded. Go into it and rename the line DB_DATABASE. Change the name generated by default and write hilodoble

Type in the terminal: php artisan migrate and press intro

Type in the terminal: php artisan migrate:fresh --seed and press intro.

Type in the terminal: npm install and press intro.

Type in the terminal: npm run dev and press intro.

Type in other terminal cd back and the command: composer install.

Type in the terminal: php artisan serve and press intro.

In other terminal to install the JWT library you have to pass the following commands in back:

1. composer require tymon/jwt-auth
2. php artisan jwt:secret

Go to the Front folder with the command cd front

Type in the terminal: npm install and press intro

Type in the terminal: npm i react-router-dom and press intro

Type in the terminal: npm install axios and press intro

Type in the terminal: npm install react-bootstrap bootstrap and press intro

To run the front test, you will need to type in the terminal: npm install --save-dev @testing-library/react to install the test library

Type in the terminal: npm i @formspree/react and press intro

Type in the terminal: npm start and press intro

This project is supported by two different repositories. To see the complete project go to https://github.com/Nataliaplm/HilodobleBack and follow the instructions in readMe.

Warning & Testing

• Important: If we then need to run more commands in the IDE, we'll open a third terminal without closing the previous two.
• BackTest: CRUDUser, CRUDITems and autentication Test: Run in the IDE php artisan test & vendor/bin/phpunit where it should return the following result: 12 passed and OK (12 test, 42 assertions)

• FrontTest: Logo and ShopFriends Test: Run in the IDE npm test where it should return the following result: 3 passed and OK ( Test Suites: 2 ; Tests: 3 )

10. Methodology:

• Pair programming.
• Solo programming.
• Agile with SCRUM.
• TDD and MVC.
• OPP Object Oriented Programming.
• Kanban

11. Next Steps

• Implement shopping cart functionality.
• Implement Cloudinary.
• Search filter and categories filter.
• Implement Contact form.
• Implement payment gateway.
• Add pages with legal texts.