meta data for this page
  •  

This is an old revision of the document!


Setting Up Your Development Environment

1. VSCode (Visual Studio Code)

  1. Download and install: VSCode is a powerful, open-source code editor developed by Microsoft. You can download it from the [official VSCode website](https://code.visualstudio.com/). It is available for Windows, macOS, and Linux.
  2. Essential Extensions:
    1. ESLint: Helps in identifying and fixing problems in your JavaScript code. It enforces consistent coding style and can automatically fix many issues.
    2. Prettier: A code formatter that ensures your code adheres to a consistent style, making it more readable and maintainable.
    3. Material-UI Snippets: Provides snippets for commonly used Material-UI components, speeding up the development process.
    4. GitLens: Enhances Git capabilities within VSCode. It provides insights into code authorship, code reviews, and repository history.
    5. Live Server: Launches a local development server with live reload feature, enabling you to see changes in real-time.
  3. For more detailed guidance on using VSCode, refer to the [VSCode Documentation](https://code.visualstudio.com/docs).

2. Node.js and npm

  1. Download and install: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, while npm is the default package manager for Node.js. Download the latest version from the [Node.js website](https://nodejs.org/).
  2. Check installation: After installation, you can verify if Node.js and npm are installed correctly by running the following commands in your terminal:
   node -v
   npm -v
   These commands will display the currently installed versions of Node.js and npm.

3. Git

  1. Download and install: Git is a version control system that allows you to track changes in your code. Download it from the [Git website](https://git-scm.com/).
  2. Basic setup: Configure your Git identity by running these commands in your terminal:
   ```bash
   git config --global user.name "Your Name"
   git config --global user.email "you@example.com"
   ```
   These commands set your global username and email, which will be used in your commits.
 - For more comprehensive information on using Git, refer to the [Git Documentation](https://git-scm.com/doc).

4. Create React App

  1. Setting up a new React project: Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
   ```bash
   npx create-react-app my-hackathon-app
   cd my-hackathon-app
   npm start
   ```
   The `npx create-react-app` command sets up a new React project in a directory named `my-hackathon-app`. The `cd my-hackathon-app` command navigates into your project directory, and `npm start` starts the development server, making your application available at `http://localhost:3000`.
 - For more information on getting started with Create React App, refer to the [Create React App Documentation](https://create-react-app.dev/docs/getting-started/).

5. Material-UI

  1. Install Material-UI: Material-UI is a popular React UI framework that implements Google's Material Design. It provides pre-built components that can help you build beautiful, responsive user interfaces quickly.
   ```bash
   npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
   ```
   This command installs the core Material-UI library, along with Emotion, which is a library for writing CSS styles with JavaScript, and Material-UI Icons for using Material Design icons in your project.
 - Material-UI offers a wide range of components such as buttons, grids, and dialogs. You can browse the available components and their usage on the [Material-UI All Components page](https://mui.com/material-ui/all-components/).
 - For installation instructions and other documentation, visit the [Material-UI Documentation](https://mui.com/getting-started/installation/).

By following these steps, you will have a powerful and efficient development environment set up, allowing you to build and manage modern web applications with ease.