SkillSwap is a modern platform designed to facilitate skill exchange, connecting people in the digital environment who want to learn with those willing to share their knowledge.

---

Why SkillSwap?

Updating and strengthening our skills is crucial, especially in a constantly evolving digital environment. SkillSwap addresses the challenges of collaborative learning, offering a smooth and effective digital experience for knowledge exchange.

Objectives

Facilitate continuous learning and collaborative teaching, creating a vibrant community where users can explore their interests and direct their personal and professional development.

---

Project Structure

For this project, we applied the Atomic Design pattern along with feature-oriented programming, as recommended for Next.js applications using Redux. We also drew inspiration from the Presentation–Domain–Data architectural pattern, following Clean Architecture principles to clearly separate UI concerns, business logic, and data access.

Additionally, we adhered to DevOps Culture practices and a SCRUM oriented project structure to efficiently define, design, develop, and deploy the frontend solutions required by our business model.

├── /public
│   ├── /img
│   ├── /svg
│   └── /vid
├── /src
│   ├── /app
│   │   ├── /(account)
│   │   │   └── /auth
│   │   │       ├── /password/reset
│   │   │       ├── layout.tsx
│   │   │       └── page.tsx
│   │   ├── /admin
│   │   │   ├── /legal
│   │   │   ├── /reports
│   │   │   ├── /users
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── /user
│   │   │   ├── /(settings)
│   │   │   │   ├── /info
│   │   │   │   ├── /profile
│   │   │   │   └── /social
│   │   │   ├── /detail/u/[id]
│   │   │   ├── /discover
│   │   │   ├── /legal
│   │   │   ├── /match
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── /legal
│   │   ├── /api
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   ├── not-found.tsx
│   │   ├── Providers.tsx
│   │   ├── ClientLayout.tsx
│   │   └── RouteHandler.tsx
│   ├── /shared
│   │   ├── /hooks
│   │   ├── /styles
│   │   ├── /types
│   │   └── /ui
│   │       ├── /atoms
│   │       ├── /molecules
│   │       ├── /organisms
│   │       └── /screens
│   ├── /core
│   │   ├── /dto
│   │   └── /models
│   ├── /features/any
│   │   ├── /types
│   │   ├── /hooks
│   │   ├── /components
│   │   └── anySlice.ts
│   ├── /lib
│   │   ├── /utils
│   │   └── store.ts
│   └── middleware.ts
├── .env*
├── .gitignore
├── .dockerignore
├── package.json
├── Dockerfile
├── README.md
└── ...

---

Tech Stack

---

Frontend

• TypeScript

• Next.js

• Docker

• Redux Toolkit

• Styled Components

• React-based libraries

Backend

• Dotnet

• C-Sharp

• Docker

• Swagger

• MySQL

• Azure

• Render

---

SkillSwap Team

---

Frontend

• franccoina David Francisco Blandón Mena

• luisaramicar11 Luisa Fernanda Ramírez Cardona

• JoanZapata05 Joan Sebastián Zapata Caro

Backend

• Arlexz96 Arlex Mauricio Zapata Mesa

• JEscobar07 Jonathan Escobar Molina

• medi77na David Steven Medina Urrego

---

Resources

1. In this link, you can view the Documentation of our project on Notion:

   • Go to Notion

2. In this link, you can view the Task Management and Sprints of our project on Jira:

   • Go to Jira

3. In this link, you can view the MockUp and Prototype Design of our project on Figma:

   • Go to Figma

4. In this link, you can view our project deployed on Vercel:

   • Go to SkillSwap

5. In this link, you can explore the team's repository for backend develop and deploy:

   • Go to Backend Repository

6. You are here right now! Be sure to explore our team's repository for frontend develop and deploy:

   • Go to Frontend Repository

P.S: In case you'd like to get in touch with our team, feel free to email us at skillswapten@gmail.com.

---

Auth Credentials

To access the admin panel, use the following credentials:

• Email: arlex.z96@gmail.com
• Password: @A12345

To access the user overview, use the following credentials:

• Email: davidmedina@gmail.com
• Password: @A12345

P.S: These credentials are provided only for demo/testing purposes. Do not use them in production environments.

---

Installation

1. Clone the repositories exactly as below:

# Frontend repository
git clone https://github.com/SkillSwap-Ten/Skiller.git   

# Backend repository     
git clone https://github.com/SkillSwap-Ten/SkillSwap.git   

2. Move into the Frontend directory and install the dependencies:

# Move into frontend folder (install project packages and dependencies)
cd Skiller
npm install

3. Due to the .gitignore, you may not have the environment variables file when cloning this project. To solve this, create an .env file on the root directory of the frontend project (/Skiller):

# File name
.env

4. Then, place there the three environment variables according to the instructions below:

• NEXT_PUBLIC_GITHUB_API_URL: GitHub API URL (default: https://api.github.com/users)
• NEXT_PUBLIC_BASE_API_URL: SkillSwap API URL (default: https://skillswap-qww9.onrender.com/api)
• GITHUB_TOKEN: GitHub API TOKEN (secret: [you_can_create_it_on_your_own])

P.S: You can generate your own GITHUB token by following the instructions on GitHub Docs... or just go to the end of this document, where we will explain it to you.

# .env.example (Guide for .env file content)
NEXT_PUBLIC_GITHUB_API_URL=github_url_here
NEXT_PUBLIC_BASE_API_URL=skillswap_url_here
GITHUB_TOKEN=your_generated_token_here

5. Now, move into the Backend directory:

# Move into backend folder (contains docker-compose.yml)
cd ..
cd SkillSwap  

6. Run the project container in the terminal with Docker. Choose ONLY ONE of the following options:

# Both Backend and Frontend for production (Next with `npm run start`)
docker compose up --build

# Backend for production and Frontend for dev (Next with hot reload `npm run dev`)
docker compose run --service-ports Skiller npm run dev

7. Open http://localhost:3000 on your browser and enjoy our project.

---

How to Generate a GitHub Personal Access Token

1. Log in to GitHub:

   • Go to GitHub and log in to your account.

2. Navigate to Settings:

   • Click on your profile picture in the top right corner.
   • Select Settings from the dropdown menu.

3. Access Developer Settings:

   • In the left sidebar, scroll down and click on Developer settings.

4. Personal Access Tokens:

   • Click on Personal access tokens in the left sidebar.
   • Select Tokens (classic).

5. Generate New Token:

   • Click on the Generate new token button.

6. Set Token Scopes:

   • Give your token a descriptive note.
   • Set the expiration for the token as needed.
   • Select the scopes for the token:
     • repo: Full control of private repositories.
     • user: Read and write access to profile data.

7. Generate and Copy the Token:

   • Click on Generate token.
   • Copy the generated token. You won’t be able to see it again!

8. Store Your Token:

   • Save your token securely, such as in a .env file, and use it in your project as needed.

Remember

Make sure to keep your token private. If you believe it has been compromised, revoke it immediately and generate a new one.

---

We thank you very much for visiting our loved project.
Greetings from the SkillSwap Team.

---

2024 SkillSwap. Looking for Skill.
© All rights reserved.