About the project

Application with basic functionalities was made in 20 hours to try new React framework - Nextjs and fetching data from Graphql database. Application has three containers: Homepage, Login and About page (that shows details of logged user).

Image 1 application homepage

Image 2 details when user is logged

On login page, validation was implemented on frontend using Indicative.js and backend using Validate.js. Also error messages are supported that was caused by backend or form itself. Form can not be submitted twice if any request already send to backend to process. Until response came back, new action on the form can be triggered.
Image 3 validation on the form

And some small UX, loader shows to indicate users that something is happening in the background.

Installation

Node.js: you have to have at least 12.x version

To run project:

1. clone repo
2. install packages from package.json and before you run the code, run

yarn install
or
yarn
or
npm install

3. run the code

npm run dev
# or
yarn dev

Other CLI commands

yarn test // run tests of UI components
yarn format // run prettier of .js files (React.js)
yarn lint // run eslint

For this project, I have used:

• Next.js
• React.js (using hooks)
• Node.js
• Styled-components (CSS)
• PropTypes
• Apollo (for GraphQl)
• Prettier
• ESLint
• ES6
• i18n (for multi-language)

Spend time for this project: 20 hours.