Tickcrypt
Web app marketplace to create and sell event tickets as NFTs using MERN.
How to run the application
-
Git clone the project
-
Open the project in visual studio code
-
Run "npm install" in the frontend folder
-
Run "npm install" in the project root directory (Tickcrypt)
-
Run "npm install" in the backend folder
-
Run "npm start" in frontend folder
-
Run "npm start" in backend folder
-
Install and open MongoDB compass
-
On MongoDB compass, connect to the localhost db
-
Navigate to the events collection in the Tickcrypt db
-
At the top of MongoDB compass toolbar, click collection tab, import data
-
Select the CSV option and select the file called "events.csv" found in the project's root folder
-
Press import
-
Navigate in the browser to: localhost://3000/Marketplace
Assumptions
Internet access would be available 24/7 working remotely Using JS across the stack would speed up development All tools were free to use The frontend dev work would take less time Each segment of development would take the same proportionate amount of time All tools, libraries, frameworks would be obtainable and accessible No dev hardware would become faulty
Links to documentation
MongoDB https://docs.mongodb.com/ Used to store user, event, purchase, and card detail data
Express https://expressjs.com/ Used to build the API interfaces
React https://reactjs.org/docs/getting-started.html Used to build the front end components
Node https://nodejs.org/en/docs/ Used to deploy server nodes for frontend and backend proxy
npm https://docs.npmjs.com/ Used to manage packages and installation
MongoDB compass https://www.mongodb.com/products/compass Used as a GUI for using MongoDB
babel https://babeljs.io/docs/en/ Compiler used to convert modern JS to run on older browsers
Mongoose https://mongoosejs.com/docs/api.html Used to abstract complexity of pure Mongo and to make life easier with object data
Tailwindcss https://tailwindcss.com/docs/installation Used to style the frontend
Material UI https://mui.com/ Used to source out-the-box styled components for the frontend
Axios https://axios-http.com/docs/intro Used to make the HTTP request calls from node to the APIs
Craco https://www.npmjs.com/package/@craco/craco Used to override app configuration - babel, postcss, tailwindcss
React-router-dom https://www.npmjs.com/package/react-router-dom Used to enable dynamic routing using react components
Express-Validator https://express-validator.github.io/docs/ Used to validate form inputs on the backend
Morgan https://www.npmjs.com/package/morgan Used to log HTTP requests and errors, simplifying the process
Bcrypt https://openbase.com/js/bcrypt/documentation Used to hash passwords and secure credentials
CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS Used to relax the security held on the API due to cross origin policy
Nodemon https://www.npmjs.com/package/nodemon Used to restart the server upon code changes (dev efficiency)
Body-parser https://www.npmjs.com/package/body-parser Used to process the data of sent HTTP request bodies
JWT https://www.npmjs.com/package/jsonwebtoken Used to authenticate users
js-cookie https://www.npmjs.com/package/js-cookie Used to establish cookie (set, get, remove )
navigate https://www.npmjs.com/package/navigate Used to navigate and redirect users based on requests
cookie-parser https://www.npmjs.com/package/cookie-parser Used to parse cookie data by attaching it to the client request object
Multer https://www.npmjs.com/package/multer Middleware used to handle image uploads
Requirements
Functional and non-functional requirements can also be found in the project's root folder called "requirements.png"
Architecture
Architecture can also be found in the project's root folder in a folder called "Architecture_diagrams"
Component abstraction
Container abstraction
Context abstraction