Skip to content

Latest commit

 

History

History
172 lines (117 loc) · 4.85 KB

README.development.md

File metadata and controls

172 lines (117 loc) · 4.85 KB

Design

Figma mockup

https://www.figma.com/design/8NGJOCtcVqLFtTrS3P0ht7/Nihongo-Alley---copied-with-new-games?node-id=0-88&node-type=CANVAS&t=FZORUYPPwlmsROs0-0

Implementation

Websocket

https://medium.com/@RajeshSharma-dev/websockets-with-nextjs-for-building-real-time-responsive-application-bc4bedd19eec https://github.com/ryanc268/Typescript-Websocket-Game/tree/main

Route

Protected route

Use middleware.ts for protected route. https://www.freecodecamp.org/news/secure-routes-in-next-js/

Authentication

We use Nextauth.js. Detail logic. https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-githubprovider-you-will-need-a-github-account

example:

const { data: session } = useSession()

the session is:

{user: {…}, expires: '2024-10-02T05:32:22.302Z'}
expires: "2024-10-02T05:32:22.302Z"
user: {email:"testuser@gmail.com"
image:"https://lh3.googleusercontent.com/....."
name:"Test User"}

Backend call

When you need to fetch from the backend instead of the url replace with getFetchBackendURL(path). Where path is the path of the backend Like the example:

  const response = await axios({
    method: 'get',
    url: getFetchBackendURL('/api/auth/user/'),
    headers: { Authorization: 'Bearer ' + session?.access_token },
  });

Styling

Use noraml css and tailwind css. You should write normal css within global.css file. https://nextjs.org/docs/pages/building-your-application/styling/css-modules#css-modules https://medium.com/@joel.woodyard/how-to-combine-tailwind-and-css-stylesheets-in-next-js-tutorial-39c522ca639

Socket

The api request are done to api/Socket.ts (Server) The socket client is SocketProvider.tsx (Client)

socket.on is the event for receive status or data

socket.emit is the event for send data to everyone

Game state

Every game contains 2 context provider

  • GameState - Contain all information about the game and the status
  • Socket - Contain all information and event about the scoket

Folder structure

There is two ways in Nextjs for routing. We adopt pages routing, not app routing.
https://medium.com/@CraftedX/should-you-use-next-js-pages-or-app-directory-38e803fe5cb4

Folder structure is related to routing.
https://nextjs.org/docs/pages/building-your-application/routing

Folder structure convention. See page router section.
https://nextjs.org/docs/getting-started/project-structure

The basic behavior of Next.js by naming for file/folders.
There are some part which is defferent in between page router and app router.
https://nextjs.org/docs/app/building-your-application/routing/colocation

The _app.tsx file is used for rendering every page.
https://nextjs.org/docs/pages/building-your-application/routing/custom-app

Page name is case-sensitive. URL is case-sensitive as well.

  • utils
    mocks-tsx.tsx
    mocks.ts
    Mock funcitons for test.

Commands

  • install
    npm install
    ※For development of only frontend, we don't need docker run.
    ※EbisuG haven't checked running app with docker yet.

  • run local
    npm run dev

  • run test
    npm run test

Testing

Plan

The purpose is to prevent degradation and reduce time run test mannually.

Component/Page test
・Check successfully rendering.
・Check fetching data.
・Check state changes correctly.

End-to-end test
・Check scenario of user events.

Tools

Use Jest + React Testing Libraries Basic usage for Jest + React:
https://www.robinwieruch.de/react-testing-library/
With Nextjs official tutorial
https://nextjs.org/docs/pages/building-your-application/testing/jest
Tips for mock Next router.
vercel/next.js#7479 (comment)
Custom renders for mock context.
https://testing-library.com/docs/react-testing-library/setup/#custom-render

Errors

  • App doesn't run after successful build. Make sure you use the latest things. Delete your image, container, and volume. Run docker compose commands again.

Reference

Using google auth.
https://blog.stackademic.com/building-a-custom-google-authentication-system-with-django-rest-framework-and-reactjs-ii-794fa8592782

Use @react-oauth/google version.
https://muhammedsahad.medium.com/react-js-a-step-by-step-guide-to-google-authentication-926d0d85edbd
https://blog.logrocket.com/guide-adding-google-login-react-app/

React test components whole overview from unit test to integration test with tools
https://medium.com/@dev.emondas/testing-react-components-a-complete-guideline-b84f1e23d176

Signup logic
https://github.com/VulcanWM/login-signup-nextjs