FPF Store

Frontend module
· Report a bug · Request a feature

Table of Contents

• Table of Contents
• About The Project
  • Frontend Developed
  • Built With
• Getting Started
  • Prerequisites
  • Development environment setup
• Contact

About The Project

This application was built as a challenge for a junior frontend developer position at FPF Tech. The challenge consisted of building a web application to manage products of an e-commerce store. The frontend application should allow an user to:

• List all products registered on the system;
• Add a new product;
• Update details of a product;
• Delete a product, showing a dialog to confirm that the user really wants to delete it.
• Extra features: On the products list screen, allows an user to search products by name.

Development technologies required to be used by the challenge:

• Frontend Frameworks: Vue.js or Angular;
• Github for code versioning.

Business rules:

• All fields are required.

Frontend Developed

The following images show the features implemented in the frontend module:

List products

Add a new product

Edit a product

Delete a product

Built With

Main libraries and CLI tools used to built the project:

• Vue.js: Frontend JavaScript framework for building user interfaces and single-page applications.
• Vuex: A state management pattern + library for Vue.js applications;
• Vuetify: A Vue UI library that implements Material Design;
• Axios: Library to handle http requests;

IDE and tools to manage coding style:

• VSCode
• ESLint
• Prettier
• EditorConfig
• Vetur

Getting Started

To get a local copy up and running follow these steps:

Prerequisites

Install Git:

• git

Install NodeJS v14:

• node

Install a package manager for node:

• yarn: Yarn 1.22.5 (classic) was used in this project.

or

• npm (default node package manager)

Development environment setup

Obs: The following commands were executed in a Ubuntu 18.04 system.

1. Clone project repository from Github:

Using https, in a terminal run:
git clone https://github.com/dzvid/fpf-store-challenge.git

Or using ssh, in a terminal run:
git clone [email protected]:dzvid/fpf-store-challenge.git

1. Setup and run the mock backend, open a terminal in the project root directory to execute following instructions:

   • Enter in the mock backend module directory, run:

     cd backend

   • Install mock backend dependencies, run:

     Using yarn:

     yarn

     Using npm:

     npm install

   • Execute mock backend and keep it running in a dedicated terminal window/tab, run (if the port 3000 is being used, change to another free port passing the new value to -p flag.):

     Using yarn:

     yarn json-server --watch db.json --host localhost -p 3000

     Or without a package manager:

     node_modules/json-server/lib/cli/bin.js --watch db.json --host localhost -p 3000

2. Setup and run frontend module, open a terminal in the project root directory to execute following instructions:

   • Enter in the frontend module directory, run:

     cd frontend

   • Install frontend dependencies, run:

     Using yarn:

     yarn

     Using npm:

     npm install

   • Setup development environment variables. Create an .env file, use the .env.example as an template, it has two variables VUE_APP_NAME (App name show in browser tab) and VUE_APP_API_BASE_URL, run following commands:

     cp .env.example .env 

     Open the .env file in your favorite editor. By default, it has the following values:

     VUE_APP_NAME=FPF Store
     VUE_APP_API_BASE_URL=http://localhost:3000

     If port 3000 is in use, change VUE_APP_API_BASE_URL to match the port configured during mock backend setup in step 1, otherwise, keep the .env file as is.

   • Start the development server, run:

     Using yarn:

     yarn serve

     Or using npm:

     npm run serve

   You can now view FPF Store frontend module in the browser at: http://localhost:8080/ (or in other url shown in terminal).

3. You are done with configuration and ready to code! (I hope so 🎉).

Contact

David Oliveira - [email protected]

Project Link: https://github.com/dzvid/fpf-store-challenge