mahmoudksultan / hackathon2-team3 Goto Github PK

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

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd my-project

Install dependencies

  npm install
  # or
  yarn

Start the dev server

  npm run dev
  # or
  yarn dev

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

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

API routes can be accessed on http://localhost:3001/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

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.

Client: React, Next, TailwindCSS

Server: Node, Express

• Client side data fetching SWR
• Promise based HTTP client axios
• Form validation react-hook-form
• Phone input react-phone-input-2
• Icons: @heroicons/react

• Tailwind CSS tailwindcss
• Plugin to Reset form styles @tailwindcss/forms

  Page.mainLayoutProps = MainLayoutProps

The following table simplifies the main layout props

  Page.getNestedLayout = (page) => {
    return <NestedLayout>{page}</NestedLayout>;
  }

When using any of these pages features, you should use the following type for that specific page:

import { NextPageWithLayout } from "types";

const Login: NextPageWithLayout = () => {
    return (
      Login page content....
    )
}

To dynamically load a component on the client side, you can use the NoSsr component to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

import { NoSsr } from "components";

 <NoSsr>
  // children will be rendered on the client side only
 </NoSsr>

You can check the default theme within tailwind.config.js file

Color	Hex
blue-DEFAULT	#0044FF
blue-light	#4375FF
blue-dark	#002a9d
gray-DEFAULT	#00000029
gray-dark	#707070
gray-light	#F3F4F6

I'm a front-end developer... wait for more details later....