Today marks the beginning of my major project—developing a fully functional e-commerce website using the MERN stack. My first task was to set up the front-end environment, which involved installing Node.js and creating a React app.
Steps Taken
- Installed Node.js: I downloaded the latest version of Node.js from the official Node.js website and installed it on my system.
- Created a Project Folder: I created a folder named
front-endand opened it in VS Code. - Initialized React App: Using the command
npx create-react-app ., I initialized a new React project directly in the terminal.
Challenges Faced
During the setup, I encountered some errors in the terminal. For instance:
Error: Unexpected token in JSON at position 0.
To resolve this, I turned to ChatGPT, which guided me step-by-step. One common solution was clearing the npm cache and reinstalling the dependencies.
Initial Setup Page
After resolving the errors, I ran npm start to launch the app. Initially, it displayed a React logo with some starter content and a few introductory questions. I modified the default code, removing the extra content and turning the page into a clean slate with the title "E-Commerce Website".
This setup now provides me with a fresh start for designing the user interface for my e-commerce platform.
Key Takeaways
- Always ensure Node.js and npm are installed correctly.
- Terminal errors are common, but solutions are always a search or question away.
- Starting small is the best way to approach a large project.