dzvid/fpf-store-challenge

FPF Store

Frontend module
· Report a bug · Request a feature

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:

Getting Started

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

Prerequisites

Install Git:

Install NodeJS:

node

Install a package manager for node:

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

npm (default node package manager)

Development environment setup

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

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 git@github.com:dzvid/fpf-store-challenge.git

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
```
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).
You are done with configuration and ready to code! (I hope so 🎉).

Contact

David Oliveira - oliveiradavid.dev@gmail.com

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

dzvid / fpf-store-challenge