Developers Resource Manager

This "React Developers Resource Manager" app  is a centralized hub for developers to store, categorize, and manage valuable development resources such as articles, code snippets, tutorials, and tools. This application is built using React, Context API, useReducer, and useState, ensuring a smooth and scalable state management solution.

Key Features: Dashboard: View and manage a list of saved resources with search and filtering options. Add Resource: Quickly add new resources by entering the title, link, category, and optional notes. Favorite & Quick Access: Star important resources for easy retrieval. Category Management: Add custom categories to organize resources better. Responsive & Styled with TailwindCSS: A modern UI with a clean and intuitive design.

Tech Stack:

• React (useState, useReducer, Context API)

• React Hook Form for form handling

• React Router for navigation

• TailwindCSS for styling

This simple tool is ideal for developers who want an organized way to save and access learning materials efficiently.

Technologies Used:

• Frontend: Vite + React 18, React Router, React Hook Form, TailwindCSS & React Hooks (useState, useEffect, useContext, useReducer, useForm)

• Hosting(Optional): Vercel Hosting.
  

Resources:

https://nodejs.org/en

https://code.visualstudio.com/

Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)

Browser: Use the latest version of Google Chrome/Microsoft Edge.

https://react.dev/

https://fonts.google.com

https://react-icons.github.io/react-icons/

React Router

Download and Install Git

Version Control: GitHub

https://color.adobe.com/explore Vercel: Build and deploy the best web experiences with the Frontend Cloud

Setting Up the Vite + React Project

Create a React Project: Create a project folder "React" and open it in VS Code

Let’s start by setting up Vite with React. Check the following URL's: Scaffolding Your First Vite Project Installing Tailwind CSS as a Vite plugin to integrate it with React Installing the necessary dependencies: > npm install react-icons react-router-dom react-hook-form

Delete "App.CSS" & Remove everything from index.css files.

> Run your build process with "npm run dev" -> http://localhost:5173/ NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

Deploying code (GitHub Commands):

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/codingZ2M/dummy.git

git push -u origin main

Vercel Deployment:

Note: Vercel serves static files but doesn’t automatically handle client-side routing in Vite + React Router apps. Solution: You need to tell Vercel to redirect all requests to index.html, allowing React Router to handle routing.

1. Create a vercel.json file in your project root (if it doesn’t exist already).

2. Add the following configuration: {

  "rewrites": [

    { "source": "/(.*)", "destination": "/index.html" }

  ]

}

Creating your own components...