PRACTICING PROJECT - developing skills managing class type component in React and MongoDB with GraphQL queries
Here you are in the main page, one can select products that correspond with the three categories shown in the upper left corner
- 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.
- 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.
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.
- buy passing the mouse over each image you can pick the product and add it to your cart with predefined attributes.
- buy 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
- React
- Redux
- Express
- GraphQL
- MongoDB
- Node
- JavaScript
- 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.