gugavillar / dowhilefrontend

NLW7 - Front-End

This is a solution to the front end application created by rocketseat for NLW7. This challenge help you improve your coding skills by building realistic application.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the page
• View real time messages
• How to use github login
• How to use vite with react;

Screenshot

Links

• Solution URL: Github
• Live Site URL: DoWhile Front-end

My process

To create this application i used vite.js with react, socket.io and oauth from github. For development the application i had to know more about use the oauth from github, know more about context in react, and know how to connect with socket.io backend.

Built with

• ReactJS
• ViteJS
• Typescript
• Socket.io
• SASS

What I learned

In this project i was learn how to use vite.js with typescript, context api ReactJS, how to login in the application with github oauth, and connect with backend created in socket.io

async function singIn(githubCode: string) {
  const response =
    (await api.post) <
    AuthResponse >
    ("/authenticate",
    {
      code: githubCode,
    });

  const { token, user } = response.data;
  localStorage.setItem("@dowhile:token", token);
  api.defaults.headers.common.authorization = `Bearer ${token}`;
  setUser(user);
}

Useful resources

• ViteJS - This helped me for understand why use vitejs.

• Socket.io - This helped me for understand how socket works.

• Github Oauth - This helped me for understand how to connect my application with github.

Author

• Twitter - @gugacocao
• Linkedin - gugavillar