HeadsUpGuys

HeadsUpGuys platform - Module Builder & Dashboard for interactive resource slides

Developers!

Adil Kapadia Chinemerem Chigbo Christine Ng Daniel Yu 🥑 Het Parikh Jay Bhagat Jennifer Lu Molly Yu Neel Ismail Nim Wijetunga Sharon He Stephanie Xu Tony Zhao Yash Gajaria

Getting Started

To run the application:

# Install dependencies
yarn

# Run locally
yarn dev

Open localhost:3000 on your browser to see the result!

General Architecture

Repo Visualization 👀

1. NodeJS application powered by the Next.JS with TypeScript framework.
2. Chakra UI along with Storybook.js for frontend components
3. Vercel for deployment, with Github Actions for pre-merge workflows

Directory Structure

    .
    ├── .babelrc
    ├── .env # Env vars
    ├── .eslintignore
    ├── .eslintrc # Eslint
    ├── .gitattributes
    ├── .github
    │   └── workflows # Github Deployment workflows
    ├── .gitignore
    ├── .next # Next.js generated files
    ├── .prettierignore
    ├── .prettierrc
    ├── .storybook # Storybook.js config files
    │   ├── main.js
    │   └── preview.js
    ├── LICENSE
    ├── README.md
    ├── __tests__
    │   └── index.spec.ts
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pages # Pages .../[fileName]
    │   ├── _app.tsx
    │   ├── _document.tsx
    |   ├── api/ # Serverless API routes
    │   ├── index.tsx # Home page
    │   └── protected.tsx # Protected route example
    ├── public # Assets
    │   ├── icons
    │   └── meta.json
    ├── src # Components, styles
    │   ├── components
    │   ├── definitions
    │   └── styles
    ├── test # Jest setup
    │   ├── jest.config.js
    │   └── jest.setup.ts
    ├── tsconfig.json
    └── yarn.lock

Added Plugins

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Go To Documentation

CSS / styled-jsx

Next.js comes with built-in support for CSS and styled-jsx. Styled-jsx is full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).

Go To Documentation

Fetch

Next.js has a built-in polyfill for the fetch API. You don't need to worry about using it on either server or client side.

Go To Documentation

Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.

Go To Documentation

Environment Variables

Use environment variables in your next.js project for server side, client or both.

Go To Documentation

SWR

React Hooks library for data fetching from Vercel

Go To Documentation

ESLint

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Go To Documentation

Prettier

An opinionated code formatter; Supports many languages; Integrates with most editors.

Go To Documentation

lint-staged

The concept of lint-staged is to run configured linter (or other) tasks on files that are staged in git.

Go To Documentation

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Go To Documentation

Github Actions

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.

Go To Documentation

License

MIT

This project was generated with Superplate.

Authentication Setup for Cognito/Amplify

1. Install the Amplify CLI
   • No need to configure the CLI- only need it installed
2. Once the Amplify CLI is installed run amplify pull --appId <ASK TEAM LEAD FOR APPID> --envName dev to pull the Cognito backend setup locally, this will make sure Amplify is connecting to the correct user pool
   • Select AWS access keys for authentication method
   • accessKeyId: <ASK TEAM LEAD>
   • secretAccessKey: <ASK TEAM LEAD>
   • region: ca-central-1
   • Should see the following message: Amplify AppID found: XXXXXXXX. Amplify App name is: headsupguys Backend environment dev found in Amplify Console app: headsupguys
   • Choose your default editor (after this step most of the defaults should be good)
   • type of app building: javascript
   • framework: react
   • source directory path: src
   • distribution directory path: build
   • Build Command: npm run-script build
   • Start Command: npm run-script start
   • Do you plan on modifying this backend? Y
3. Run the amplify pull command
4. Verify your installation: Under the src directory you should see aws-exports.js and you should see an amplify directory