codigouranio / clan.sports.js Goto Github PK

Document all process and steps to run the project, as frontend as backend in a local machine.

Add the @trivago/prettier-plugin-sort-imports plugin and its settings in Prettier for automatic sort imports.

Investigating I got this component library that allows more possibilities of changes in the components, although I have never used it we could use it as a way of learning.
ChakraUI

Implement and install all dependencies for Material UI.

https://mui.com/material-ui/

Let us expose examples of material UI components in Storybook.

Add git hooks with the Husky, Lint Staged, and Commit Lint tools to maintain code-level project quality assurance and best practices, regardless of work environment and team member.

Add a basic button in the home page and show an alert to say Hola mundo!

Researching there are two new tools for status and request management that are much better than the Redux package.

• Zustand manage state => https://github.com/pmndrs/zustand
• React Query => https://react-query-v3.tanstack.com/

I noticed that there are missing dependencies in the imports.

When you hover the mouse over the import dependencies in any coding file you can find below error message:

module "/Users/joseblanco/data/clan.sports/node_modules/@nestjs/common/index"
"nestjs": Unknown word.cSpell

Integrate https://chakra-ui.com/ UI framework in the frontend

the created component stories in frontend/src/stories do not belong to the actual components

Write Readme with standard readme
Example:

• https://github.com/RichardLitt/standard-readme/blob/master/example-readmes/maximal-readme.md
• https://github.com/spacedriveapp/spacedrive

npm run dev (frontend)

redux-persist failed to create sync storage. falling back to noop storage.
 action persist/PERSIST @ 14:43:45.048
   prev state {
    testApi: {
      queries: {},
      mutations: {},
      provided: {},
      subscriptions: {},
      config: {
        online: true,
        focused: true,
        middlewareRegistered: false,
        refetchOnFocus: false,
        refetchOnReconnect: false,
        refetchOnMountOrArgChange: false,
        keepUnusedDataFor: 60,
        reducerPath: 'testApi'
      }
    },

Please, add all details and collected information regarding Terraform in this issue.

https://stackblitz.com/edit/react-8nwrgk
https://dev.to/aaditkamat/testing-with-jest-and-react-testing-library-1amh
https://www.appsloveworld.com/reactjs/100/41/unit-testing-chakra-ui-with-jest
https://github.com/goldbergyoni/javascript-testing-best-practices/blob/master/readme-es.md#secci%C3%B3n-3%EF%B8%8F%E2%83%A3-frontend-testing
https://github.com/goldbergyoni/javascript-testing-best-practices

Example Guide:

• https://github.com/athityakumar/colorls/blob/main/CONTRIBUTING.md
• https://github.com/LappleApple/feedmereadmes/blob/master/CONTRIBUTING.md

This landing page has to show the clan.sports logo, slogan and present an input box to join to the newsletter for all announcements. This implies creating a controller to register the user email and send the emails. Also, we have to indicate that the first 100 subscribers will obtain a free premium subscription for the first 2 years. So, the logic should limit the total subscribers to 1000 for the second round. In other words, the first 100 subscribers will also be beta users with premium service and the rest 900 only beta users.

All subscriptions should be persisted on database.

The chosen slogan is "Preserve your progress, unleash your potential and claim your achievements.".

Add button to join to newsletter in order to learn regarding the launch.

Inspiration examples:

https://bootstrapmade.com/demo/FlexStart/
https://dribbble.com/shots/19756767-web-site-design-landing-page-modern-web-site-page-ui

In order to create this landing reuse, the current frontend and backend.

https://immerjs.github.io/immer/

Example

https://github.com/belgattitude/nextjs-monorepo-example

Create user management domain to create/update/delete users. This entity will be use for login, authorization and registration.

Choose among below testing frameworks to implement testing in frontend

• https://www.cypress.io/ 🏆
• https://playwright.dev/
• https://pptr.dev/