Skill-App

Skill App is a web application that allows users to register, log in, and manage their skills. It provides functionality for adding and removing skills and displays users and their respective skills.

Live Link: https://prismatic-brigadeiros-14ae59.netlify.app

Table of Contents

• Features
• File Structure
• Installation
• Usage
• Backend Endpoints
• Frontend Components
• Technologies Used
• Web Preview

Features

• User authentication (register, login, logout)
• Add and remove skills
• View all users and their skills
• Secure routes with authentication middleware

File Structure

skill-app/
│
├── backend/
│   ├── controllers/
│   │   └── skillController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   ├── models/
│   │   ├── Skill.js
│   │   └── User.js
│   ├── routes/
│   │   ├── authRoutes.js
│   │   └── skillRoutes.js
│   └── server.js
│
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── AuthForm.js
│   │   │   ├── Navbar.js
│   │   │   ├── SkillForm.js
│   │   │   └── UserList.js
│   │   ├── pages/
│   │   │   ├── Dashboard.js
│   │   │   └── Home.js
│   │   ├── utils/
│   │   │   └── api.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── App.css
│   └── package.json
│
├── .gitignore
├── README.md
└── package.json

Installation

Prerequisites

• Node.js
• npm
• MongoDB

Backend Setup

1. Clone the repository:

    git clone https://github.com/krishna7054/Skill-App.git
    cd skill-app/backend

2. Install dependencies:

   npm install

3. Create a .env file with the following content:

    MONGO_URI=your_mongodb_connection_string
    JWT_SECRET=your_jwt_secret

4. Start the backend server:

   npm run dev

The backend server will be running on http://localhost:5000.

Frontend Setup

1.Navigate to the frontend directory:

``bash cd frontend

2. Install dependencies:

   npm install

3. Start the frontend development server:

   npm start

The frontend server will be running on http://localhost:3000.

Usage

1. Open your browser and navigate to http://localhost:3000.
2. Register a new user or log in with an existing account.
3. Add or remove skills and view all users and their skills.

Backend Endpoints

• POST /api/auth/register: Register a new user
• POST /api/auth/login: Log in a user
• GET /api/auth/user: Get authenticated user's information
• POST /api/skills/add-skill: Add a new skill
• GET /api/skills/users: Get all users and their skills
• GET /api/skills/users/ : Get a specific user and their skills
• DELETE /api/skills/delete-skill/ : Delete a skill by ID

Frontend Components

• AuthForm: Handles user registration and login
• Navbar: Navigation bar with links to Home, Login, Register, and Dashboard
• SkillForm: Form to add new skills and display current skills
• UserList: Displays a list of all users and their skills

Technologies Used

• Backend: Node.js, Express, MongoDB, Mongoose, JWT

• Frontend: React, Axios, Tailwind CSS

• Authentication: JSON Web Tokens (JWT)

  preview