Merge pull request #16 from Monstarrrr/init/nextjs

Init NextJS

.gitignore

@@ -1,3 +1,7 @@
+# No package should be installed in the root directory
+package-lock.json
+package.json
+
 # Python
 .venv
 __pycache__

.pre-commit-config.yaml

@@ -5,7 +5,7 @@ repos:
  hooks:
  - id: ruff
  types: [python]
- args: ["--fix"]
+ args: ['--fix']
  - id: ruff-format
 
  # ISORT
@@ -21,7 +21,8 @@ repos:
  hooks:
  - id: mypy
  types: [python]
- additional_dependencies: [django-stubs, djangorestframework-stubs]
+ additional_dependencies:
+ [django-stubs, djangorestframework-stubs]
 
  # BANDIT
  - repo: https://github.com/PyCQA/bandit
@@ -34,3 +35,14 @@ repos:
  rev: v4.0.0-alpha.8
  hooks:
  - id: prettier
+ args:
+ [
+ '--tab-width',
+ '2',
+ '--single-quote',
+ '--no-semi',
+ 'use-tabs',
+ '--jsx-single-quote',
+ '--print-width',
+ '68',
+ ]

backend/docker-compose.yml

@@ -2,6 +2,6 @@ services:
  web:
  build: .
  ports:
- - "8000:8000"
+ - '8000:8000'
  env_file:
  - .env

frontend/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+ "extends": [
+ "@babel/plugin-transform-private-property-in-object",
+ "next/core-web-vitals"
+ ]
+}

frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [https://localhost:3000](https://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`](https://nextjs.org/docs/basic-features/font-optimization) 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](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

frontend/app/(auth)/error.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { useEffect } from 'react'
+
+export default function Error({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string }
+ reset: () => void
+}) {
+ useEffect(() => {
+ // Log the error to an error reporting service
+ console.error(error)
+ }, [error])
+
+ return (
+ <div>
+ <h2 style={{ color: 'red' }}>ERROR:</h2>
+ <p>{error.message}</p>
+ <button onClick={reset}>Try again</button>
+ </div>
+ )
+}

frontend/app/(auth)/layout.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function AuthLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <div>
+ This is the auth layout :D ~ I am in every Auth pages
+ <br />
+ <br />
+ {children}
+ </div>
+ )
+}

frontend/app/(auth)/login/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPage() {
+ const router = useRouter()
+
+ async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+ event.preventDefault()
+
+ const formData = new FormData(event.currentTarget)
+ const username = formData.get('username')
+ const password = formData.get('password')
+
+ const response = await fetch(
+ 'https://dummyjson.com/auth/login',
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ username,
+ password,
+ }),
+ },
+ )
+
+ if (response.ok) {
+ alert('Login successful')
+ router.push('/')
+ } else {
+ throw new Error('Failed to login')
+ }
+ }
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <input
+ type='text'
+ name='username'
+ placeholder='Username'
+ value='kminchelle'
+ required
+ />
+ <input
+ type='password'
+ name='password'
+ placeholder='Password'
+ value='0lelplR'
+ required
+ />
+ <button type='submit'>Login</button>
+ </form>
+ )
+}

frontend/app/_components/form.tsx

@@ -0,0 +1,26 @@
+import { InputType } from '@/app/_models/inputs'
+
+export default function Form(props: {
+ inputs: InputType[]
+ onSubmit: (e: React.FormEvent) => void
+}) {
+ const { inputs, onSubmit } = props
+
+ return (
+ <form>
+ {inputs.map((input) => (
+ <label>
+ {input.label}
+ <input
+ name={input.name}
+ placeholder={input.placeholder || ''}
+ // Inputs are required by default
+ required={input.required || true}
+ type={input.type}
+ />
+ </label>
+ ))}
+ <button type='submit'>Submit</button>
+ </form>
+ )
+}

frontend/app/_models/inputs.ts

@@ -0,0 +1,7 @@
+export type InputType = {
+ type: 'text' | 'password' | 'email' | 'number' | 'date' | 'time'
+ name: string
+ label: string
+ placeholder?: string // Optional
+ required?: boolean // Optional
+}

frontend/app/_styles/fonts.ts

@@ -0,0 +1,3 @@
+import { Inter } from 'next/font/google'
+
+export const inter = Inter({ subsets: ['latin'] })