Frontend module
·
Report a bug
·
Request a feature
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.
The following images show the features implemented in the frontend module:
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:
To get a local copy up and running follow these steps:
Install Git:
Install NodeJS v14:
Install a package manager for node:
- yarn: Yarn 1.22.5 (classic) was used in this project.
or
- npm (default node package manager)
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 [email protected]: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 variablesVUE_APP_NAME
(App name show in browser tab) andVUE_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 🎉).
David Oliveira - [email protected]
Project Link: https://github.com/dzvid/fpf-store-challenge