Skip to content

Latest commit

 

History

History
135 lines (89 loc) · 3.73 KB

GENIE.md

File metadata and controls

135 lines (89 loc) · 3.73 KB
Raw

Project Blueblood | Genie

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

Genie is the first web app to be developed by the team

Other apps will be coming soon

The team is comprised of 4 Purdue University Students

  • Primus
  • Tanuja
  • Keerthika
  • Reshma

Getting Started

  • Create a [.env.local] file in the root directory
  • and fill in the details from your firebase setup.
  • This is an example
NEXT_PUBLIC_API_KEY=
NEXT_PUBLIC_AUTH_DOMAIN=appName.firebaseapp.com
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_STORAGE_BUCKET=appName.appspot.com
NEXT_PUBLIC_MESSAGING_SENDER_ID=
NEXT_PUBLIC_APP_ID=
NEXT_PUBLIC_MEASUREMENT_ID=

First , run:

npm install
# or 
npm setup

Second, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Icons

npm i react-icons --save # | Let's you easily get any Icons - Material, FontAwesome, etc.

Hooks

npm i react-firebase-hooks # | Let's you easily import the user and check if the user is ther or not

Explanations

Documentation

NOTE - If the user is signed in, display username

  • import {useAuthState} from 'react-firebase-hooks';
  • import {auth} from '../../utils/firebase';

NOTE - Our pages are being rendered using the Layout

  • all the components are being passed into the Layout component which is then passed into the App.
  • We will take care to rectify this

[x] - ensure the quiz is only accessible from the private route

  • Currently, just inputing the right link will give you the quiz
  • Either move the entire quiz folder into the private folder or change the links

[] - use-sound | an npm package for sound prompts

This library only works in React DOM, but [@remigallego] created an alternative for React Native! Check out https://github.com/remigallego/react-native-use-sound react-native-use-sound.

  • TODO - We will look into implementing this feature at a later date; because NextJs currently does not support Audio rendering

[x] - Check the Navbar | Images tag should be used not img tag

This will fix most of the hydration ui issue.

[] - Remove the alert from the notification bell

Remove the alert after user has opened the message(s)

[x] - Fix the style in login page

Use the tailwindcss bg-color tag and not the inline style tag

[x] Hydration Error caused by authentication state

  • Fix the authentication state for all the pages,
  • Make sure that authState is properly used where needed.

NOTE - Add a token to the admin link

Only those with the token will be able to see the admin login page

NOTE - Working with react-three/fiber or react-three/drei for the About Pages

We can implement a features where the 2 canvases are in one page and each is revealed at different camera positions

Aside ---- Next.config.js by keerthika

const nextConfig = {
  reactStrictMode: true,}
module.exports = {
  images: {
    domains: ['wallpapercave.com'], },
  nextConfig};

FIXME - If you encounter a server error on this app after making changes

  • If you have made changes to either the package.json file or the next.config.js file
  • and the app is not starting up, delete the .next folder and run - npm run dev.
  • If the issue is not fixed, contact the admin or team blueblood

STUB - This is an ongoing project by Team Blueblood 👻

LINK - Genie or https://genie-bay.vercel.app/