remometro / nexus

License: © Purizu di Angelo Reale

Authors: varsnothing aka Angelo Reale

Why Libs:

react

react is an industry standard, that leverages a virtual dom to simulate user and server interactions, commiting those changes to the actual dom in the form of rendering abstractions, where nodes get hydrated with the latest state of an application

react/context-api

flux pattern is a great way to make sure any application running keeps a solid and reliable history of the actions taken by the user/server. i've tried to mimic this pattern, mostly used from tools like redux, using solely the context api, thus, breaking the state into different, isolated context/providers, and creating/enforcing a flux workflow to prevent state mismatches and unnecessary re-renders.

nextjs

it's a great and simple framework for creating csr/ssr/ssg/isr applications, with a syntax pragma that works really well with Vercel. a great tool i use for infrastructure at low/zero cost.

nextauth

it's the standard tool for simplifying auth flows in next.js

typescript

it helps with little bugs that may creep into a fast evolving app

mongo

flexible, easy to use with javascript, although with my implementation i've enforced a schema in a mongoose-esque way, to ensure there are less of the aforementioned TypeError bugs.

nodemailer

just a tool to send emails via node, useful for our passworldless login.

clsx

the tinies lib for adding business logic to css without any bootstrap, js-in-css or other jsx pragmas/css tools/preprocessors. i've used css modules for treeshaking and reducing bundle size.

prettier

nice to keep the code clean and consistent when it comes to syntax

eslint

good to catch multiple types of dark patterns.

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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

nexus's Issues

EC-002: Top Nav + Routing: Ability + Tenancy

Context

This assignment introduces two business logics (image uploading and prediction) thus needing at least 2 more views.

Ask

Please add a top-nav + routing + 2 new tabs/views for the users belonging to that particular tenant (EC-001).

Solution

We already have a user pill with a sign in/out option. Since the focus is not on design, let's use the top-right side for navigation, and abstract the middle view to support the routing destinations.

Caveats

We need to be aware of the patterns we already used, and try not to be redundant (DRY)

Acceptance Criteria

User needs to be able to see at least two more tabs and navigate to them if they are logged in to the EC tenant.

• Show org selection after login
• Add org view switch on front end
• Add features to Org Schema
• Add enabled feature parser on FE build/render
• Abstract nav panels
• Add image uploader panel
• Add image overlay panel

QA Steps

(optional) Write unit tests
(optional) Write integration tests

Please ask a manual QA to:

Test that a user that signed up on EC tenant sees the nav and can navigate.
Test that a user that signed up on HF tenant does not sees the nav and thus can't navigate.

Definition of Ready

This depends on EC-001

Definition of Done

PR is approved;
PR is merged to dev;