feat: add global styles and layout structure for the application#20
Open
Adarshsinghsikarwar wants to merge 1 commit into
Open
feat: add global styles and layout structure for the application#20Adarshsinghsikarwar wants to merge 1 commit into
Adarshsinghsikarwar wants to merge 1 commit into
Conversation
feat: implement home page with initial content and layout feat: configure axios for API requests with token handling and session management feat: set up Redux store with authentication slice feat: create signup form with client-side validation and API integration feat: implement authentication hooks for login and registration feat: add middleware for route protection based on authentication status feat: define TypeScript types for user and authentication responses chore: add TypeScript configuration for the project
There was a problem hiding this comment.
Pull request overview
This PR introduces an initial Next.js client application scaffold (global layout/styles, auth UI, API client, and state management) and updates the server to handle credentialed CORS requests.
Changes:
- Added Next.js app structure (root layout, global styles, homepage) plus shared Providers for Redux + React Query.
- Implemented client-side auth flow plumbing: typed API wrappers, React Query auth hooks, Redux auth slice, login/register pages, and route-protection middleware.
- Updated the server app to add a custom CORS middleware (credentialed requests + dynamic origins).
Reviewed changes
Copilot reviewed 28 out of 36 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| FluxyAI-server/src/repositories/implementations/MistralRepository.js | Minor formatting/comment adjustments around streaming/title generation. |
| FluxyAI-server/src/app.js | Adds custom CORS middleware before API routes. |
| fluxyai-client/tsconfig.json | Introduces TypeScript configuration for the client app. |
| fluxyai-client/src/types/index.ts | Adds shared TS types for user/auth requests/responses. |
| fluxyai-client/src/middleware.ts | Adds Next.js middleware for route protection based on auth cookie. |
| fluxyai-client/src/lib/providers.tsx | Adds Redux + React Query provider wrapper for the App Router. |
| fluxyai-client/src/features/auth/slice/authSlice.ts | Adds Redux auth slice (user + isAuthenticated). |
| fluxyai-client/src/features/auth/hooks/useAuthApi.ts | Adds React Query mutations for login/register. |
| fluxyai-client/src/features/auth/components/SignupForm.tsx | Adds registration form with client-side validation and API integration. |
| fluxyai-client/src/features/auth/components/SiginForm.tsx | Empty file present in auth components folder. |
| fluxyai-client/src/config/store/index.ts | Configures Redux store and exports RootState/AppDispatch types. |
| fluxyai-client/src/config/axios/index.ts | Adds Axios instance with refresh flow + session handling. |
| fluxyai-client/src/app/page.tsx | Adds initial home page content (template). |
| fluxyai-client/src/app/layout.tsx | Adds root layout wiring global CSS + Providers + fonts. |
| fluxyai-client/src/app/globals.css | Adds Tailwind v4 import and base theme variables. |
| fluxyai-client/src/app/(auth)/register/page.tsx | Adds /register page rendering SignupForm. |
| fluxyai-client/src/app/(auth)/register/layout.tsx | Adds register route-group layout wrapper. |
| fluxyai-client/src/app/(auth)/login/page.tsx | Adds /login page with login mutation + redirect. |
| fluxyai-client/src/app/(auth)/login/layout.tsx | Adds login route-group layout wrapper. |
| fluxyai-client/src/api/register.ts | Adds register API wrapper using configured Axios client. |
| fluxyai-client/src/api/logout.ts | Adds logout API wrapper. |
| fluxyai-client/src/api/login.ts | Adds login API wrapper. |
| fluxyai-client/src/api/index.ts | Barrel exports for auth API modules. |
| fluxyai-client/README.md | Adds default Next.js README scaffold. |
| fluxyai-client/public/window.svg | Adds static asset. |
| fluxyai-client/public/vercel.svg | Adds static asset. |
| fluxyai-client/public/next.svg | Adds static asset used on the homepage. |
| fluxyai-client/public/globe.svg | Adds static asset. |
| fluxyai-client/public/file.svg | Adds static asset. |
| fluxyai-client/postcss.config.mjs | Adds PostCSS config for Tailwind. |
| fluxyai-client/package.json | Adds client package manifest (Next/React/Redux/React Query/etc.). |
| fluxyai-client/next.config.ts | Adds Next config enabling React Compiler. |
| fluxyai-client/eslint.config.mjs | Adds ESLint config based on Next presets. |
| fluxyai-client/.gitignore | Adds standard Next.js/Node ignores. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+15
to
+29
| // Custom CORS Middleware to handle credentials and dynamic origins | ||
| app.use((req, res, next) => { | ||
| const origin = req.headers.origin; | ||
| if (origin) { | ||
| res.header("Access-Control-Allow-Origin", origin); | ||
| } | ||
| res.header("Access-Control-Allow-Credentials", "true"); | ||
| res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); | ||
| res.header("Access-Control-Allow-Headers", "Content-Type,Authorization"); | ||
|
|
||
| if (req.method === "OPTIONS") { | ||
| return res.sendStatus(200); | ||
| } | ||
| next(); | ||
| }); |
Comment on lines
+8
to
+20
| // 1. Skip middleware for assets, fonts, internal pages | ||
| if ( | ||
| pathname.startsWith("/_next") || | ||
| pathname.startsWith("/images") || | ||
| pathname.startsWith("/fonts") || | ||
| pathname.endsWith(".woff") || | ||
| pathname.endsWith(".woff2") || | ||
| pathname.endsWith(".ttf") || | ||
| pathname.endsWith(".otf") || | ||
| pathname.startsWith("/favicon.ico") | ||
| ) { | ||
| return NextResponse.next(); | ||
| } |
Comment on lines
+45
to
+46
| const originalRequest = error.config; | ||
| const status = error.response?.status; |
Comment on lines
+29
to
+34
| // res.data contains user object and accessToken | ||
| const { accessToken, user } = res.data; | ||
|
|
||
| // 1. Store accessToken in client-accessible cookie for the middleware | ||
| Cookies.set("access", accessToken, { expires: 1 / 96 }); // Expires in 15 minutes (1/96th of a day) | ||
|
|
Comment on lines
+94
to
+100
| const { accessToken } = refreshResponse.data; | ||
| if (accessToken) { | ||
| // Set client-readable cookie for middleware (expires in 15 mins) | ||
| Cookies.set("access", accessToken, { expires: 1 / 96 }); | ||
| processQueue(null, accessToken); | ||
| isRefreshing = false; | ||
| // Retry the original request |
Comment on lines
+26
to
+32
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| <Providers>{children}</Providers> | ||
| </body> | ||
| </html> | ||
| ); |
Comment on lines
+1
to
+26
| import { createSlice, PayloadAction } from "@reduxjs/toolkit"; | ||
|
|
||
| interface UserState { | ||
| id: string; | ||
| email: string; | ||
| username: string; | ||
| } | ||
|
|
||
| interface AuthState { | ||
| user: UserState | null; | ||
| isAuthenticated: boolean; | ||
| } | ||
|
|
||
| const initialState: AuthState = { | ||
| user: null, | ||
| isAuthenticated: false, | ||
| }; | ||
|
|
||
| const authSlice = createSlice({ | ||
| name: "auth", | ||
| initialState, | ||
| reducers: { | ||
| setUser: (state, action: PayloadAction<UserState>) => { | ||
| state.user = action.payload; | ||
| state.isAuthenticated = true; | ||
| }, |
Comment on lines
+1
to
+2
| import React from "react"; | ||
| import SignupForm from "@/features/auth/components/SignupForm"; |
Comment on lines
+1
to
+25
| import type { Metadata } from "next"; | ||
| import { Geist, Geist_Mono } from "next/font/google"; | ||
| import Providers from "@/lib/providers"; | ||
| import "./globals.css"; | ||
|
|
||
| const geistSans = Geist({ | ||
| variable: "--font-geist-sans", | ||
| subsets: ["latin"], | ||
| }); | ||
|
|
||
| const geistMono = Geist_Mono({ | ||
| variable: "--font-geist-mono", | ||
| subsets: ["latin"], | ||
| }); | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Create Next App", | ||
| description: "Generated by create next app", | ||
| }; | ||
|
|
||
| export default function RootLayout({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode; | ||
| }) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat: implement home page with initial content and layout
feat: configure axios for API requests with token handling and session management
feat: set up Redux store with authentication slice
feat: create signup form with client-side validation and API integration
feat: implement authentication hooks for login and registration
feat: add middleware for route protection based on authentication status
feat: define TypeScript types for user and authentication responses
chore: add TypeScript configuration for the project