docs: add improved dev get started info (#259)

* feat(docs): add nvm info

* feat(docs): add recommended VSCode extensions

* feat: add UTRP Social Preview and update docs

* chore: update readme

README.md

@@ -1,100 +1,133 @@
-![readmegif2](https://github.com/user-attachments/assets/1aca0f75-f143-4bc9-97f5-1a99d0d9c1ac)
-
 # UT Registration Plus
 
+![UTRP Social Preview](images/UTRP_Social-Preview_Prod.svg)
+
 ![Chrome Web Store](https://img.shields.io/chrome-web-store/v/hboadpjkoaieogjimneceaahlppnipaa)
 ![Downloads](https://img.shields.io/chrome-web-store/d/hboadpjkoaieogjimneceaahlppnipaa)
 ![License](https://img.shields.io/github/license/Longhorn-Developers/UT-Registration-Plus)
 
-We've all been there. 20 tabs of Rate My Professor, Google Spreadsheet, and the UT Course Schedule open and you still don't know what classes to take.
+**UT Registration Plus (UTRP)** streamlines the process of registering for classes at UT Austin by reducing the chaos of juggling multiple tabs like Rate My Professor, Google Sheets, and the UT Course Schedule. With UTRP, you can simplify class selection and schedule management. We've all been there. 20 tabs of Rate My Professor, Google Spreadsheet, and the UT Course Schedule open and you still don't know what classes to take. UT Registration Plus (UTRP), tries to streamline most of the unnecessary steps and headaches of registering for classes at UT Austin.
-This extension, UT Registration Plus (UTRP), tries to streamline most of the unnecessary steps and headaches of registering for classes at UT Austin.
 
-- For each class in the UT Course Schedule site, UTRP provides a "breakdown" popup, with quick and easy links to the instructor's RateMyProfessor, Course Evaluation Survey (CES) and past syllabi.
+## Demo
 
-- Shows the course description with highlighted information on prerequisites, restrictions, etc.
+![UTRP v2 Demo](images/UTRP-Demo.gif)
 
-- Shows an aggregate and semesterly graph of the grade distributions for each course.
+## Features
 
-- Gives you the ability to add "Add Course" and view them in the extension popup, a quick list of all the courses you have saved and an easy way to copy unique numbers.
+-   **Quick Access to Class Info**: For each class in the UT Course Schedule, UTRP provides a "breakdown" popup with direct links to RateMyProfessor, Course Evaluation Surveys (CES), and past syllabi.
-
+-   **Prerequisite & Restriction Highlights**: Displays course descriptions with highlighted details on prerequisites, restrictions, and other important info.
-- Highlights and crosses-out what courses on the UT Course Catalog would conflict with your currently saved courses, making selecting courses that fit with your schedule so much easier.
+-   **Grade Distribution Graphs**: View an aggregate and semester-specific graph of grade distributions for each course.
-
+-   **Saved Courses List**: Easily add courses to a list and view them in the extension popup. Copy unique numbers with a single click.
-- Display's a weekly schedule based on your saved courses.
+-   **Conflict Detection**: Automatically highlights and strikes out courses that conflict with your saved courses in the UT Course Catalog.
-
+-   **Weekly Schedule View**: Displays your saved courses in a weekly schedule format for easier planning.
-- Give you the ability to create multiple schedules to plan for different scenarios.
+-   **Multiple Schedule Support**: Create multiple schedules to plan for different registration scenarios.
-
+-   **And much more!**
-- ... and much more!
 
 ## Toolchain
 
-- React 18
+-   React 18
-- TypeScript
+-   TypeScript
-- Vite 5
+-   Vite 5
-- ESLint
+-   UnoCSS
-- Prettier
+-   ESLint
-- Storybook
+-   Prettier
-- Semantic-Release
+-   Storybook
-- Custom Messaging & Storage Wrappers
+-   Figma
+-   Semantic-Release
+-   Custom Messaging & Storage Wrappers
+
+## VSCode Extensions
+
+We recommend using the following VSCode extensions to improve your development experience:
+
+-   **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**: For identifying and fixing linting issues.
+-   **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**: For automatic code formatting.
+-   **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**: For Tailwind CSS class autocomplete and IntelliSense.
+-   **[UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)**: For better support with UnoCSS utilities.
 
 ## Contributing
 
-Contributions are welcome and encouraged! To contribute, please follow these steps:
+Contributions are welcome and encouraged! To get started:
 
-1. Fork the repository
+1. **Fork** the repository.
-2. Create a new branch (`git checkout -b feature/your-feature`)
+2. **Create a new branch**: `git checkout -b feature/your-feature`.
-3. Make your changes and ensure the code follows the linting and formatting rules (`pnpm run lint` and `pnpm run prettier`)
+3. **Make changes** and ensure your code passes linting and formatting checks: `pnpm run lint` and `pnpm run prettier`.
-4. Commit your changes following the **Conventional Commits** specification
+4. **Commit your changes** following the [Conventional Commits](#conventional-commits--branch-naming-convention) specification.
-5. Push to the branch (`git push origin feature/your-feature`)
+5. **Push** your branch: `git push origin feature/your-feature`.
-6. Open a Pull Request
+6. **Open a Pull Request**.
 
-For large changes, it's recommended to open an issue first to discuss your proposed changes.
+For significant changes, it’s recommended to open an issue first to discuss the proposed updates.
 
 ## Development: Getting Started
 
-1. Clone this repo
+1. Clone this repository: `git clone https://github.com/Longhorn-Developers/UT-Registration-Plus.git`
-2. This project uses `pnpm` to manage and patch dependencies. Run `pnpm install` to configure the repository for building/development
+2. **Node Version**: This project requires the Node.js version specified in `.nvmrc`. Use [nvm](https://github.com/nvm-sh/nvm) to install and manage the correct version:
-3. Using either of the methods listed below, the extension will build to the `dist/` directory.
+    ```bash
+    nvm install
+    nvm use
+    ```
+    _Note: Installing the wrong Node version can lead to errors during setup._
+3. Install dependencies using `pnpm` (which manages and patches dependencies):
+    ```bash
+    pnpm install
+    ```
+
+Once set up, the extension can be built to the `dist/` directory using the following methods:
 
 ### Development Builds
 
-- Run `pnpm dev`
+-   Run the development server:
+    ```bash
+    pnpm dev
+    ```
 
-> [!NOTE]
+> **Note**: Injected content on UT pages may not display correctly in development mode. To develop with accurate styles, use the following command:
-> Injected content such as extension content on UT pages is not properly styled, and are missing class stylings. When developing for these pages, use `NODE_ENV='development' pnpm run dev build --mode development -w` to build and watch for changes. This will ensure you are seeing an accurate representation of the extension.
+>
+> ```bash
+> NODE_ENV='development' pnpm run dev build --mode development -w
+> ```
 
 ### Production Builds
 
-- Run `pnpm build`
+-   To generate production builds:
+    ```bash
+    pnpm build
+    ```
 
 <details>
-<summary>Beta builds</summary>
+<summary>Beta Builds</summary>
-Use `BETA=true pnpm build` to build a beta build.
+
+Use `BETA=true pnpm build` to generate a beta build.
+
 </details>
 
-## Development: Loading the Extension Manually
+## Loading the Extension Manually
 
-Open [chrome://extensions](chrome://extensions), ensure you have 'Developer Mode' enabled, and click 'Load unpacked'.
+To load the extension manually in Chrome:
 
-Navigate to the `dist/` folder, and click 'select' to import the extension.
+1. Open `chrome://extensions`.
+2. Enable 'Developer Mode'.
+3. Click 'Load unpacked'.
+4. Navigate to the `dist/` directory and select it.
 
 ## Bug Reporting
 
-If you encounter any bugs or issues, please submit a detailed report in the [Issues](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues) section. Be sure to include:
+If you encounter bugs or issues, please report them in the [Issues](https://github.com/Longhorn-Developers/UT-Registration-Plus/issues) section, including:
 
-- A descriptive title
+-   A clear, descriptive title
-- Steps to reproduce the issue
+-   Steps to reproduce the issue
-- Expected behavior
+-   Expected behavior
-- Screenshots or logs (if applicable)
+-   Screenshots or logs (if applicable)
 
-We will address issues as promptly as possible.
+We aim to address issues promptly.
 
 ## Conventional Commits & Branch Naming Convention
 
-We follow the **Conventional Commits** specification for commit messages. This helps us maintain a consistent history, enabling automated versioning and changelog generation.
+We follow the **Conventional Commits** specification for commit messages. This ensures a consistent commit history and enables automated versioning and changelog generation.
 
 ### Commit Messages
 
-Please format your commit messages as follows:
+Follow this structure for commit messages:
 
 ```
 <type>(<scope>): <subject>
@@ -102,20 +135,20 @@ Please format your commit messages as follows:
 
 Where:
 
-- **type**: One of the following:
+-   **type**: One of the following:
-  - `feat`: A new feature
+    -   `feat`: A new feature
-  - `fix`: A bug fix
+    -   `fix`: A bug fix
-  - `docs`: Documentation changes
+    -   `docs`: Documentation updates
-  - `style`: Code formatting (white-space, formatting, missing semi-colons, etc.)
+    -   `style`: Code formatting changes (whitespace, semicolons, etc.)
-  - `refactor`: Code restructuring (neither fixes a bug nor adds a feature)
+    -   `refactor`: Code restructuring (without adding features or fixing bugs)
-  - `test`: Adding or modifying tests
+    -   `test`: Adding or modifying tests
-  - `chore`: Changes to the build process or auxiliary tools
+    -   `chore`: Maintenance tasks or build process changes
 
 Example:
 
 ```
 feat(auth): add login functionality
-fix(ui): correct button alignment
+fix(ui): align buttons in navbar
 ```
 
 ### Branch Naming
@@ -128,34 +161,36 @@ Branch names should follow the format:
 
 Examples:
 
-- `feat/user-login`
+-   `feat/user-login`
-- `fix/navbar-layout`
+-   `fix/navbar-layout`
-- `docs/update-readme`
+-   `docs/update-readme`
 
 ## License
 
-This project is licensed under the MIT License. See the [LICENSE](./LICENSE.md) file for more details.
+This project is licensed under the MIT License. See the [LICENSE](./LICENSE.md) for more details.
 
-## Code of Conduct [TODO]
+## Code of Conduct
 
-We adhere to a strict code of conduct. By participating, you are expected to uphold this code. Please read [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) for details.
+We maintain a strict code of conduct. By contributing, you agree to adhere to the rules outlined in [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
 
 ## Acknowledgements
 
-This project leverages several powerful open-source tools and libraries. Special thanks to the developers behind:
+Special thanks to the developers and contributors behind these amazing tools and libraries:
-- React 18
+
-- TypeScript
+-   React 18
-- Vite 5
+-   TypeScript
-- ESLint
+-   Vite 5
-- Prettier
+-   UnoCSS
-- Storybook
+-   ESLint
-- Semantic-Release
+-   Prettier
-- [chrome-extension-toolkit](https://github.com/sghsri/chrome-extension-toolkit)
+-   Storybook
-- [UT_Grade_Parser](https://github.com/doprz/UT_Grade_Parser)
+-   Figma
-- [eslint-plugin-import-essentials](https://github.com/doprz/eslint-plugin-import-essentials)
+-   Semantic-Release
-- Figma designs by @IsaDavRod
+-   [chrome-extension-toolkit](https://github.com/sghsri/chrome-extension-toolkit)
-- Custom pnpm patches by @Razboy20
+-   [UT_Grade_Parser](https://github.com/doprz/UT_Grade_Parser)
-- UT Registration Plus v1 with @sghsri as the original author for creating the foundation of UTRP and impacting thousands of UT students positively via his Chrome Extension
+-   [eslint-plugin-import-essentials](https://github.com/doprz/eslint-plugin-import-essentials)
-- [UT Registration Planner](https://github.com/doprz/UT-Registration-Planner) was archived and it's developer @doprz joined UT Registration Plus in 2023
+-   [UT Registration Plus v1.2.2.7](https://github.com/Longhorn-Developers/UT-Registration-Plus/tree/legacy) by @sghsri
-- [Longhorn Developers](https://github.com/Longhorn-Developers) organization was created in 2024 for further development of UTRP and other student-led projects.
+-   [UT Registration Planner](https://github.com/doprz/UT-Registration-Planner) by @doprz
-- All UTRP devs, beta testers, and anyone who helped support this project
+-   [Figma Designs](https://www.figma.com/design/8tsCay2FRqctrdcZ3r9Ahw/UTRP) by @IsaDavRod
+-   [Longhorn Developers](https://github.com/Longhorn-Developers) - established in 2024
+-   The UTRP devs, beta testers, and all supporters of the project!