Setup a staging environment

Manage continuous deployment
Get the site live after confirming the name.

Setup for production

Branch - main
Build command - yarn build:production

Note: Choose build command and branch according to the environment we're deploying for. Please check above, branch and build command for production deployment.

Steps to deploy

• Go to vercel dashboard https://vercel.com/dashboard
• Click on Add New button on dashboard page of Vercel.
  
• Select Project from the menu.
  
• Search repository Skill-tree-frontend give required permission to vercel to import the repository.
  
• Click on import to import repository.
  
• Fill all the details as in image below(change build command as per environment we're deploying). Here it's for staging in image.
  
• Wait, wait, wait till the deployment gets done.
• Voila😍 we've successfully deployed our app.
  
• Click on go to dashboard then click on visit to check if everything is fine and upto the mark.
  

Domain will be - https://skilltree.realdevsquad.com/

For configuring domain please refer this link - https://vercel.com/docs/projects/domains/add-a-domain

Issue Description

We have to change env variables for same build command across different environments.

Expected Behavior

One build command can be used in any environment and we can use environment variable to check what environment the build has to be generated for.

Current Behavior

Currently we have different build command and env files for different environments, like:
yarn build:production for production
yarn build:staging for staging

Screenshots

n/a

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

n/a

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Issue Description

Integrate API in navbar

Expected Behavior

It should show user details in navbar.

Current Behavior

Currently we do not show any data in navbar that is API is not integrated.

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Requirements

• Add the react-query library in the project for API calls and caching
• write tests for the same using msw

Description

• currently the Details slide over opens with a snap, adding transition to it
• Fix the UI for the Details slide over on mobile device
• add feedback on hover on in the table
• open the slideover on clicking the table row

Design

https://www.figma.com/file/NoGWCSYI5qF1CGmwn0XKQH/skill-tree?type=design&node-id=23-895&mode=design&t=4pFn6Bo7XxeFyIJK-0

Requirements

• create UI components with dummy data
• write tests for the components
• Make the components reusable

Additional Info

Ask your doubts at https://discord.com/channels/673083527624916993/1114589148901294150

Issue Description

We have to create a navbar for the app which can be used to navigate the web app.

Expected Behavior

It should have navbar for easy navigation between app's pages and screens.

Current Behavior

As of now we don't have navbar present in our app.

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

n/a

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Description:

• Currently any new user who comes up to this repository and reports a new issue ticket, we don't have a template. For a better user and contributor experience, shall we add a template for ease process?

Potential Solution:

• Let's setup a GitHub actions for the same? Or else we can create a md file and from settings we can manually mark that file as template. Let's discuss more on it.

Screenshots:

Dropdown to selected user and skill and then filter endorsement based on it
also filter based on endorsement status - APPROVED/ PENDING/ REJECTED

Figma: https://www.figma.com/file/NoGWCSYI5qF1CGmwn0XKQH/skill-tree?type=design&node-id=23-895&mode=design&t=4pFn6Bo7XxeFyIJK-0
Design and Implementation Discussion should be documented before starting work on the task

Additional Info

Ask your doubts at https://discord.com/channels/673083527624916993/1114589148901294150

Issue Description

We have to update the yarn lock file as per the latest yarn version present in our package.json to avoid any dependency versions conflicts, and also update the next.config.js for static export.

Expected Behavior

yarn lock file should be updated and next config file should be updated so as to export the static build.

Current Behavior

yarn lock file is not updated and configs are not set in next config file.

Screenshots

n/a

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Description

• Setup Readme
• Setup staging environment
• Setup prod environment

Authentication and Authorisation

Design doc link - https://docs.google.com/document/d/1oFSvj_6ijdzASVa5QdGcMLxlHQnkpXa_anzI82qKcwk/edit#heading=h.b1fnfb7zo1h5

• #39
• Frontend Auth with node backend.
• Frontend Auth with skill tree backend.
• Retry mechanism in frontend.

Overview

We have to create a page where users can create endorsements for others as well as themselves. We can create an endorsement for users by selecting their username and skill with a description.

User Story

• As a user I can create endorsement of myself or for others.
• As a user I can search the "user" for creating endorsement with a dropdown type search component.
• As a user I can select the skill from the dropdown type search component while creating an endorsement.
• As a user I can create skills if not found from the dropdown type search component and then create the endorsement.
• As a user I should be able to add description to my endorsement for additional details about the endorsements I am creating.

Requirements

• Follow TDD for the feature.

Reference(Images, Design, Links etc.)

Note: Design will be slightly updated

Figma link - https://www.figma.com/file/NoGWCSYI5qF1CGmwn0XKQH/skill-tree?type=design&node-id=951-80&mode=design&t=w7utit7YDK44Cotx-0

Acceptance Criteria

• User can create endorsement of theirself or for others.
• User can search the user for creating endorsements with a dropdown type search component.
• User can select the skill from dropdown type search component.
• User can create skill if not found from dropdown type search component.
• User should be able to fill description while creating endorsement.

Scope

• User can create endorsement of theirself or for others.
• User can search the user for creating endorsements with a dropdown type search component.
• User can select the skill from dropdown type search component.
• User can create skill if not found from dropdown type search component.
• User should be able to fill description while creating endorsement.

Note

• As of now we're only making for adding upvote/downvote(removing will be done later*)
• Do not add this to so that user can create this endorsement and skills.
• Built with the set of skills as of now instead of creating a skill(like user can create React/ReactJS, which will be handling in separate issue).
• Add validations for inputs

Issue Description

Right now we're using fetch at some places but we should use axios instead of fetch.

Expected Behavior

It should use axios instead of fetch.

Current Behavior

It is using fetch at some places.

Screenshots

n/a

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Issue Description

More details to be filled

Expected Behavior

Current Behavior

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Design

https://www.figma.com/file/NoGWCSYI5qF1CGmwn0XKQH/skill-tree?type=design&node-id=201-2316&mode=design&t=4pFn6Bo7XxeFyIJK-0

Requirements

create UI components with dummy data
write tests for the components
Make the components reusable

Additional Info

Ask your doubts at https://discord.com/channels/673083527624916993/1114589148901294150

Issue Description

Add query hook with react query for self user details

Expected Behavior

Add query hook with react query for self user details

Current Behavior

Add query hook with react query for self user details

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Figma: https://www.figma.com/file/NoGWCSYI5qF1CGmwn0XKQH/skill-tree?type=design&node-id=649-1028&mode=design&t=511nPvYRgRXmabYj-4

Issue Description

As part of our ongoing efforts to optimize our development environment and streamline our workflow, we must integrate Volta into our Skill-Tree-Frontend repository. Volta offers a sophisticated solution for managing JavaScript command-line tools, ensuring consistency and efficiency across our projects.

Expected Behavior

Upon successful integration of Volta, our team members should experience a seamless transition between projects, with Volta automatically managing the versioning of tools like Node, npm, and Yarn based on the project's requirements.

Current Behavior

At present, our development environment lacks the benefits of Volta integration, leading to potential discrepancies in tool versions across projects and the manual effort required to manage dependencies.

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

1. Navigate to the root directory of the project.
2. Open the package.json file and you'll see volta is missing

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

This integration aligns with our goal of standardizing development practices and enhancing collaboration within our team. By leveraging Volta's capabilities, we anticipate significant improvements in development efficiency and reduced dependency management overhead.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

[PROD-DEPLOYMENT] Skill Tree of Cloudflare

Branch - main
Repo - skill-tree-frontend

Environment Variables

NODE_VERSION = 20.11.1
YARN_VERSION = 4.1.1
NEXT_PUBLIC_APP_ENV = production

Here are the steps for deploying the frontend in Cloudflare with Next js static build export:

• Go to https://www.cloudflare.com/ and login with your credentials.
• Go to Workers and Pages in sidebar (image for reference)
  
• Click on create application button
  
• There is Workers and Pages in tabs, click on Pages
  
• Click on Connect to Git button and give necessary permission required for this repository
  
• If the permission is already setup with Git or you setted up, the repository will show here as netlify-skilltree is coming
  
• Select the project and click on Begin Setup
  
• Add this configuration in form
  • Production branch - main
  • Framework preset - Next JS (Static HTML Export)
  • Build command -

  yarn run build
  

  • Build output directory -

  out
  

• Fill this in Environment variables section

NODE_VERSION = 20.11.1
YARN_VERSION = 4.1.1
NEXT_PUBLIC_APP_ENV = production

• Then click on Save and Deploy button

• Hurray🥳🥳, we've deployed our site to Cloudflare
  

• Click on Continue to project button

• Now head over to url coming under Production heading if everything is working fine
  

• Yep we can see the url and our site in action. Nice✨
  

• Next step is to configure our domain on Cloudflare

Domain will be - https://skilltree.realdevsquad.com

Please follow this guide for adding custom domain - https://developers.cloudflare.com/pages/configuration/custom-domains/

setup project with eslint, prettier and pre-commit hook

Issue Description

Currently the readme file for the project is outddated we have to update this.

Expected Behavior

Currently the readme file for the project is outddated we have to update this. It should have following things in place:

• Add local ssl proxy steps to setup to use APIs in dev environment
• Remove staging url from readme.

Current Behavior

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

Requirements

• make the endorsement form functional
• integrate /users?user API - present in RDS BE
• integrate /skills/{name} - skill tree API
  and make the API call to create endorsement

Additional Info
Ask your doubts at https://discord.com/channels/673083527624916993/1114589148901294150

Requirements

• Integrate Update Endorsement Status API
• write tests for the same

Additional Information

Design Doc - Here
Backend Issue - Here

Requirements

• integrate GET endorsements API call with pagination
• write tests for the same

Things that can be done to improve performance

• the API response should be cached such that page=1 once fetched revisiting that page we get the data from our cache

Additional Info
Ask your doubts at https://discord.com/channels/673083527624916993/1114589148901294150

Description

Add a simple health check API to frontend to check the overall end-to-end flow.

Acceptance Criteria

• It should print the API response of the Skill Tree API in frontend

issues
Files were not arranged in proper order, resulting in a barrier to creating new pages. so arranged the files in proper order