Gym Full Stack Company Portfolio

The "Gym Full Stack Company Portfolio" is a comprehensive portfolio project showcasing the development of a full-stack web application for a gym or fitness company. The project includes both frontend and backend components. To get started, API keys need to be updated in the .env file within the ./frontend directory. The frontend can be initiated by navigating to the ./frontend folder, installing dependencies with yarn install, and then starting the application with yarn start. For the backend, open a new terminal, navigate to the ./backend directory, install dependencies, and start the server. The README also provides references to relevant JavaScript and ReactJS documentation, frontend design resources, asset tools, and backend development references.

• UPDATE API Keys in .env file in ./frontend folder

REACT_APP_SANITY_TOKEN=
REACT_APP_SANITY_PROJECT_ID=i4k5q5mf
REACT_APP_PUBLIC_STRIPE_PUBLISHABLE_KEY=
REACT_APP_STRIPE_SECRET_KEY=

Start by

cd ./frontend yarn install yarn start

Open a new terminal for backend cd ./backend yarn install yarn start

References

• JavaScript References
• hooks-state-ReactJS - Docs From ReactJS State Hook Documentation
• hooks-useEffect()-ReactJS - Docs From ReactJS useEffect() Hook Documentation
• hooks-Reference-ReactJS - Docs From ReactJS Hooks Reference
• Components and Props -ReactJS - Docs From ReactJS Components and Props Documentation
• Solve React useEffect() Hook Infinite Loop Patterns
• JavaScript Guide: Working with Objects

Frontend

• MDBootstrap Standard Snippet
• MDBootstrap Ratio Utilities
• MDBootstrap Button Components
• MDBootstrap Ripple Effect
• W3Schools: How to Hide Scrollbars
• Loaf: Website Builder

Assets

• Video by Tima Miroshnichenko on Pexels
• FreeConvert: Video Compressor
• CloudConvert: MP4 to WebM
• MDN Web Docs: HTML Video Element

BackEnd

• Sanity: How Queries Work
• Sanity: Query Cheat Sheet
• Sanity: Schema Types
• FreeCodeCamp: Deploy React Router-based App to Netlify