PINUS Client

Revamped PINUS website - AY20/21 onwards.

Accessible at https://pinusonline.org

This is a Next.js project bootstrapped with create-next-app.

Development Setup

You should have the latest npm and node versions installed on your local machine before running. At least the tested node version is 16.x, which for those Ubuntu user, this guide might be helpful (However the production Vercel has only Node 14.x for the latest Node version). Install yarn running

npm install yarn

Install all dependencies using:

yarn install

Duplicate the .env.local.sample file and rename the copy to .env.local. In the file, fill in the API key with the information provided by the Tech Directors

(Note: the API key is confidential, do not disclose it).

Then run the development server:

yarn run dev

Open http://localhost:3000 to see the result.

UI Components:

pinus-client heavily relies on pinus-ui-library which contains most of React UI components to be used for any pinus tech projects. The development of the UI is easier on pinus-ui-library repo as it contains storybook and chromatic CI/CD.

Sidenote: Emulating Authentication

If you are developing on private routes, you will need to emulate Firebase Authentication on your local machine to be able to do local login and user management.

To do that, you need to install the Firebase CLI with

yarn global add firebase-tools

Then, on another terminal (aside from the one that runs npm run dev), navigate to the project folder again and run this command:

yarn run firebase:dev

This runs the Firebase Emulator and seeds it with three accounts: admin, creator, and member.

You can check the credentials for each at http://localhost:4000/auth. That page can also create new users if you want to test with custom accounts. The minimum fields that you need to fill in are the "Display Name", "Email", and "Password".

Available Scripts

To lint relevant files (or you can activate prettier if you are using WebStorm or vscode which will lint the code on the fly):

yarn run lint

To build the app for production:

nvm use 
yarn build
yarn start

Learn More

To learn more about the stack and libraries used, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• TypeScript Documentation
• React Documentation
• Tailwind CSS Documentation
• Redux Tutorials
• React-Redux-Firebase Authentication Documentation

Licensed under the MIT License