Museum Site

Motivation

Artist and artifacts are more praised but less explored This project is an effort to preserve the art and craft o the history

why?

This project was actually build to learn React js and Material UI this is the first project of mine based on react js. This whole project to the last semi-colon belongs to me

overview

Frontend:

• React js
• Hover js
• Swiper js
• Material Ui
• THREE js
• cloudinary

Frontend Folder structure

📦src
┣ 📂components
┃ ┣ 📜AnnouncementBar.jsx
┃ ┣ 📜Artist.jsx
┃ ┣ 📜Backdrop.jsx
┃ ┣ 📜Banner.jsx
┃ ┣ 📜Card.jsx
┃ ┣ 📜CardComponent.jsx
┃ ┣ 📜CollectionHighlight.jsx
┃ ┣ 📜Details.jsx
┃ ┣ 📜Events.jsx
┃ ┣ 📜footer.jsx
┃ ┣ 📜Gallery.jsx
┃ ┣ 📜Genre.jsx
┃ ┣ 📜GenreItem.jsx
┃ ┣ 📜header.jsx
┃ ┣ 📜HeroSlide.jsx
┃ ┣ 📜Highlights.jsx
┃ ┣ 📜History.jsx
┃ ┣ 📜loading.jsx
┃ ┣ 📜Medium.jsx
┃ ┣ 📜MediumItem.jsx
┃ ┣ 📜MockUp.jsx
┃ ┣ 📜MoreArtifacts.jsx
┃ ┣ 📜Podcast.jsx
┃ ┣ 📜Search.jsx
┃ ┣ 📜SearchedItem.jsx
┃ ┗ 📜VIdeo.jsx
┣ 📂Context
┃ ┗ 📜AuthContext.js
┣ 📂Pages
┃ ┣ 📜Artifact.jsx
┃ ┣ 📜Artists.jsx
┃ ┣ 📜Artwork.jsx
┃ ┣ 📜Collections.jsx
┃ ┣ 📜Home.jsx
┃ ┣ 📜Login.jsx
┃ ┣ 📜Medium.jsx
┃ ┣ 📜Profile.jsx
┃ ┗ 📜Register.jsx
┣ 📂utils
┃ ┣ 📜fetchArtistBanner.js
┃ ┣ 📜ProtectedRoute.js
┃ ┗ 📜server.js
┣ 📜App.css
┣ 📜App.js
┣ 📜index.js

Frontend Routes ( with Images )

/ Home Route

---

/profile User Profile Route

/artists Major artists route

/artist/:id Individual artist route

/explore Route to display explorable artifacts /explore/:id individual explore page /artifact/:id individual artifact and details

Other component

Loading Screen display

Login and Sign up

Backend

folder structure

📦server
┣ 📂controller
┃ ┗ 📜authController.js
┣ 📂middleware
┃ ┣ 📜authMiddleware.js
┃ ┗ 📜uploadMiddleWare.js
┣ 📂models
┃ ┗ 📜User.js
┣ 📂routes
┃ ┗ 📜authRoutes.js
┣ 📂utils
┃ ┗ 📜db.js
┗ 📜server.js

hosting platform

• Heroku ( backend )
• Netlify (Frontend)

Contribution?

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.\

See the section about running tests for more information.

npm run build