THE MILKY WAY

Table of Contents

• Description
• Tech Stack
• Installation
• Deployed Link
• Screenshot
• Credits
• Questions
• Copyright

Description

The MERN Stack is used by many developers. The acronym stands for:

Mongo DB: A document-based open-source database, that provides you scalability and flexibility. Express JS: A structured base designed to develop web applications and APIs. React JS: A Javascript Front-end library for building user interfaces. Maintained by Facebook. Node JS: A javascript runtime built on Chrome’s V8 JS engine.

Milky Way is a digital art gallery where users can upload their original art and find prospective buyers. It is a one page MERN Stack Application.

Tech Stack

• HTML
• CSS
• Npm packages (ie. Styled Components)
• Javascript
• MERN Stack (MongoDB, Express, REACT, Node)
• JWT Auth
• REACT

Installation

Git clone the repository into your terminal.

Deployed Link

https://milkywayart.herokuapp.com/

Screenshot

Credits

https://en.wikipedia.org/wiki/Wheatbelt_(Western_Australia)

https://stackoverflow.com

https://w3schools.com

https://altcampus.school/posts/10-full-stack-beginner-project-ideas-for-learning-MERN-stack

https://medium.com/bb-tutorials-and-thoughts/how-to-develop-and-build-mern-stack-9a7a1099624

https://github.com/emmannweb/eshopappltd

https://stackoverflow.com/questions/58627992/how-to-build-a-dynamic-single-page-web-app-using-mern-stack

https://medium.com/swlh/how-to-create-your-first-mern-mongodb-express-js-react-js-and-node-js-stack-7e8b20463e66

Styled Components How To: https://www.youtube.com/watch?v=02zO0hZmwnw

Creating Wireframes: https://www.springboard.com/blog/design/how-to-create-a-wireframe/

https://elementor.com/blog/wireframe-website/

https://medium.com/swlh/create-a-web-page-using-react-d5ad9d03fb1f

https://www.freecodecamp.org/news/build-a-react-application-with-load-more-functionality-react-hooks/

http://www.nymfont.com/2009/06/new-caviar-dreams-font.html

https://www.dafont.com/caviar-dreams.font

https://github.com/bradtraversy/huddle_styled_components

How to add Stripe payment:

https://thushaltk.medium.com/how-to-add-stripe-payment-gateway-to-your-mern-project-82f34691dc57

https://www.npmjs.com/package/@stripe/react-stripe-js

https://stripe.com/docs/keys https://stripe.com/docs/stripe-js/react

1. MERN STACK tutorial: https://www.youtube.com/watch?v=-0exw-9YJBo

How to add JWT Auth: backend- https://youtu.be/enopDSs3DRw

frontend- https://www.youtube.com/watch?v=mvfsC66xqj0&t=408s

4. Redux https://www.youtube.com/watch?v=UXjMo25Nnvc

How to add React Modal: https://dev.to/tallangroberg/making-a-modal-with-react-styled-components-leveraging-dev-tools-2cjn

https://github.com/TallanGroberg/modal-tutorial/blob/main/src/App.js

https://codepen.io/PnkFluffyUnicorn/pen/RwPvKKG

https://blog.logrocket.com/integrating-stripe-react-stripe-js/#:~:text=In%20React%20Stripe.js%2C%20Elements%20are%20available%20in%20the,other%20components%2C%20like%20the%20Elements%20provider%20and%20ElementsConsumer.

How to add images to MongoDb https://www.bezkoder.com/node-js-upload-store-images-mongodb/#:~:text=uploading%20Files%2FImages%20to%20MongoDB%20getting%20list%20of%20Files%E2%80%99,be%20stored%20in%202%20collections%3A%20photo.files%20and%20photos.chunks.

How to add avatars:

https://mui.com/material-ui/react-avatar/

https://coreui.io/react/docs/components/avatar/

https://reactnativeelements.com/docs/components/avatar

https://multiavatar.com/

How to gradient: https://www.colorhexa.com/color-gradient

https://www.colorhexa.com/8500ff-to-ca00ff

How to deploy to Heroku: https://devcenter.heroku.com/articles/git

Questions

Any questions, please email [email protected]

Copyright

©️ 2022 Hergemony™️ Digital. All rights reserved.

🔙 back to top