This project is a multi-page application created using Javascript. It uses an API REST to show adverts posted by different logged users that are ether selling or looking for a certain product.
First, clone the project's repository, which is our frontend:
git clone https://github.com/cris0k/FrontendJS_Project.git
Then, open a new empty window in your editor and clone the repository of the API REST called Sparrest.js
which will be used as our backend:
https://github.com/kasappeal/sparrest.js.git
Ones its clones, install all the dependencies in the sparrest.js page:
npm i
Go back to the project's page and inside the folder data
copy the file db.json
and paste it into sparrest.js 's page.
This is the "database" that will be used to store all the adverts and user's data.
There are already some adverts created so you have something to play with but feel free to delete it and start over if you wish.
Now that everything is set, run sparrest.js with:
npm start
Then go to the main project page and run ;
npm live-server
Here is what you should expect to see:
-
Adverts List
: On the main page you will see all the adverts that have been posted, from the newest to oldest. -
Advert detail
: If you click on any advert's photo or name, you will go to another page, where you can read more information about that specific product.-
Delete Advert
Button: Will only appear if you have posted that advert. It will delete that post, if you wish to do so. -
Send an offer
Button: will appear if you are not the owner of that post. It will just show you a nice message if you click on it.
-
-
Sign up
: A form where you can register, creating a username and a password so you can later log in and have available other actions on the web page. Ones you signed up, you will automatically log in. -
Log in
: It allows you to log in into the webside if you already have an user created. Your username will appear on the main page's top-right side. -
Post New Advert
: This button will appear only ones you have logged in. It will take you to another form where you will be able to post your own advert.- Note: To upload the photo you must paste an URL, if you do not have one, dont worry, it will upload a 'Image Coming Soon' photo automatically.