Skip to content

Proyecto colaborativo para app web de Intercambio de Habilidades en Medios Digitales. Integración de Backend y Frontend: SkillSwap, Looking for Skill

Notifications You must be signed in to change notification settings

franccoina/SkillSwap

 
 

Repository files navigation

Logotype

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?

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

Objective

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

Technologies Used

  • Frontend:

    • Next.js, TypeScript, Redux Toolkit, Styled Components, Bootstrap Icons
  • Backend:

    • C#, .NET, Swagger, Azure

Admin Credentials

To access the admin panel, use the following credentials:

These credentials should be used only for administrative purposes.

Project Structure

├── public
│   ├── img
│   └── svg
├── src
│   ├── app
│   │   ├── (account)
│   │   │   └── auth
│   │   ├── admin
│   │   │   ├── legal
│   │   │   ├── posts
│   │   │   ├── reports
│   │   │   ├── users
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── api
│   │   │   └── github-profile
│   │   ├── legal
│   │   ├── recoverPassword
│   │   ├── redux
│   │   │   ├── slices
│   │   │   └── store.ts
│   │   ├── user
│   │   │   ├── detailUser
│   │   │   ├── discover
│   │   │   ├── legal
│   │   │   ├── match
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   │   └── (settings)
│   │   │       ├── info
│   │   │       ├── profile
│   │   │       ├── metrics
│   │   │       ├── skills
│   │   │       └── social
│   │   ├── layout.tsx
│   │   ├── providers.tsx
│   │   ├── rootHandler.tsx
│   │   └── globalStyling.tsx
│   ├── components
│   │   └── ui
│   ├── hooks
│   ├── lib
│   │   ├── services
│   │   └── utils
│   ├── models
│   └─── middleware.ts
└─── .env.local (OPTIONAL)

Resources

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

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

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

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

Equipo Frontend

  • David Francisco Blandón Mena

    • franccoina
  • Luisa Fernanda Ramírez Cardona

    • luisaramicar11
  • Joan Sebastian Zapata Caro

    • JoanZapata05

Equipo Backend

  • Arlex Mauricio Zapata Mesa

    • Arlexz96
  • Jonathan Escobar Molina

    • JEscobar07
  • David Steven Medina Urrego

    • medi77na

Installation

  1. Clone the repository:
git clone https://github.com/luisaramicar11/skillSwap.git
  1. Run the project in terminal:
npm run dev
  1. Create a file named ".env.local" in the root of the project:
  • This file should contain a GITHUB token allowing you to preview users' GitHub profiles.
  • However, due to the ".gitignore", you may not have this file when cloning this project, or it may be automatically deleted during transfer.
  • It is recommended that you create it manually, but don’t worry; this will not affect your experience.
  • You will need to generate your own GITHUB token, which you can obtain by following the instructions on GitHub or just go to the end of this document, where we will explain it to you.
.env.local
  1. Write the following code in the previously created file to keep the token in your project. You must name the variable this way, otherwise, it will not work:
NEXT_PUBLIC_GITHUB_TOKEN=your_generated_token_here
  1. 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.local file, and use it in your project as needed.

Important:

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 SkillSwap Team.


Skillswap-Isotype
2024 SkillSwap, Inc. Looking for Skill.
© All rights reserved.

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.9%
  • JavaScript 0.1%