PRACTICING PROJECT - developing skills managing class type component in React and MongoDB with GraphQL queries
This is the Landing Page. It's a very simple page just to build a bridge to the main page
Here you are in the main page, one can select products that correspond with the three categories shown in the upper left corner
You are viewing the type of currency selector
You can also check your cart using a flying minicart and change product's characteristics too
You can also check and change products's characteristics in the main cart page
Selecting a product leads you to the details page
This is a fake checkout but can be upgraded easily
Website's link
- Once you click in the link you should wait 5 seconds until the data is loaded. If it doesn't load completely, reload the page. Then you can try this app as you wish.
- Should you have any inconvenience, please let me know.
- Link to site
Project's Goals
- Build a Mini Storefront using React class type component only, Redux, JavaScript, Node, MongoDB and GraphQL.
- Use and practice all concepts related to HTML, CSS, Graphql queries, Mongo Atlas.
- Learn better coding practices and NSQL DB as Mongo.
- Practice GIT's workflow.
Statement
The main idea was to create a simple storefront that would retrieve data from a fake DB, self loaded when thr BE server is run.
As a user you can:
- navigate among three categories: All, Clothes and Tech.
- select the currency you prefer.
- see your stored products by clicking in the cart icon.
- change the attributes of each product in the minicart deployable feature.
- by passing the mouse over each image you can pick the product and add it to your cart with predefined attributes.
- by clicking on the product's image the user can see relevant information about the product and change preferencies.
- reloading each page will show you what you where viewing before.
- the user can close the browser and come back later, founding that the selected products are still in the cart.
- products out off stock are shown but the user is not able to select them.
The DB is populated using a seeder that can be found in the API main folder, inside SRC folder:
- There are three categories predefined
- There are eight products predefined
Technologies used:
- React
- Redux
- Express
- GraphQL
- MongoDB
- Node
- JavaScript
How it works
- Clone this repository,
- MongoDB Compass should be runing,
- Run npm install while you are in folder Api and Client,
- Run npm start in both folders Api and Client,
- Whait until http://localhost:3000 opens itself in your browser.