/bwa-mern-staycation-frontend

React Frontend Staycation App

Primary LanguageSCSS

Fullstack Javascript MERN Stack
Website Travel

I bought a course from BWA and learn how to build website using MERN stack technology.

This is the frontend web, build with React, and deployed with Netlify

🚀 Link to Backend, Deploy Backend

⚛️ Link to Deploy React

🏫 Link to Course

📸 Screenshot

       

       

       

🧾 Description

MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js front-end framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any front-end JavaScript framework can work.

🔑 Keypoints

  • Learn to Use Reactjs Libraries
  • Learn to Build APIs with Nodejs & Expressjs
  • Learn to make reusable component react from scratch
  • Learn to work with non-sequel DBs with mongodb
  • Learn UI/UX in building an online hotel booking website
  • Learn Usability-Testing by analyzing website user behavior

✔️ Web Flow

⚙ Tools and Technologies used

  1. Node JS
  2. React JS
  3. Bootstrap CSS
  4. GitHub
  5. Figma
  6. InVision App
  7. Visual Studio Code

🛠 Installation and setup

  1. Clone the repo to your local machine.

  2. Install the required dependency for server using :

    npm install

  3. Create a .env file inside the root folder and provide the following environment variables:

    PUBLIC_URL = <deployed web url>
REACT_APP_HOST = <deployed backend url>

  4. Start the dev server using :

    npm start

  5. Build project using :

    npm run build

📝 Note

If you using Node.js ^17.0.0 change the scripts in package.json

replace start script

"start": "react-scripts start"

to

"start": "react-scripts --openssl-legacy-provider start"

replace build script

"build": "react-scripts build"

to

"build": "react-scripts --openssl-legacy-provider build

Another method you can try is

  1. Downgrade you're Node.js version lower than 17.0.0
  2. Or upgrade React version in package.json