Q-ARTZ

Description

• Q-ARTZ is an E-commerce site, an one place for art lovers to purchase artworks.
• Developed a full-stack web application using with NodeJs serving a REST API with ReactJS as the frontend
• Used React Components, React-Hooks, Redux-Store for state management and Material-UI for styling.
• Implemented JWT Auth for user authentication and authorization.

QUICK START

• Clone the repository ' Q-Artz-WebStore' by clicking on the Clone button https://github.com/ansi22/Q-Artz. Alternatively, download the repository.
• Navigate to the folder $ cd Q-Artz

CLIENT SETUP

• Navigate to the client folder $ cd client

• Install all the required dependencies $ npm i

• To run the frontend of the application: $ npm start

• Inside your browser, navigate to the link localhost:3000

SERVER SETUP

• Navigate to the server folder $ cd server

• Install all the required dependencies $ npm i

• To run the backend of the application: $ node app.js or $ nodemon app.js

• The server is running on port 5000

FEATURES

• Authentication
• CRUD operations.
• Pleasant UX

TO-DO

• Authorization & Authentication
• Payment Gateway
• Multi-Vendors addition
• Deployment

LEARNING POINTS

• JWT Authentication
• Creating easy to use APIs
• Working with React and Redux store

TECH STACK

• CLIENT-SIDE:
  • REACT JS - An open-source JavaScript library for building user interfaces.
  • Redux - An open-source JavaScript library for managing application state.
• SERVER-SIDE:
  • NODE JS - JavaScript runtime environment that executes JavaScript code outside of a browser.
  • ExpressJS - Web application framework for Node.js for building web applications and APIs.
  • MONGO-DB - Cross-platform document-oriented database program.
• TESTING:
  • POSTMAN - Popular API client that makes it easy to create, share, test and document APIs.

NODE PACKAGES/ LIBRARIES USED:

• CLIENT-SIDE:

  • axios, react-moment, react-redux, redux-thunk, validator.

• SERVER-SIDE:

  • bcryptjs, body-parser, express, jsonwebtoken, mongoose, nodemon, validator

DEVELOPMENT ENVIRONMENT: Visual Studio Code - Editor

Screenshots

Landing Page

Sign-in	Sign-up

Artwork	Artwork details

Checkout details	Shipping address

Shipping details	Order