Skip to content

homepage & user-details page. Along with backend.#31

Merged
iamanishx merged 17 commits intomainfrom
homepage
Dec 8, 2025
Merged

homepage & user-details page. Along with backend.#31
iamanishx merged 17 commits intomainfrom
homepage

Conversation

@ujsquared
Copy link
Contributor

@ujsquared ujsquared commented Aug 7, 2025

image

Fixes suggested-

The card color is determined by the item's index in the forumData array (idx % 4). This approach is fragile because a change in the data's order will change the colors of the cards. A more robust solution would be to include the color or style variant as a property within each object in the forumData array. This makes the component's behavior more predictable and easier to manage.

The CSS variable --brutal-blue is already defined in :root. Redefining it here in .light with the same value is redundant. For better maintainability, you should remove this redundant declaration.

Gemini 2025

Signed-off-by: ujsquared <ujsquared@gmail.com>
Signed-off-by: ujsquared <ujsquared@gmail.com>
Signed-off-by: ujsquared <ujsquared@gmail.com>
Signed-off-by: ujsquared <ujsquared@gmail.com>
.turbo
.DS_Store No newline at end of file
.DS_Store
todo.md
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i need to remove this from commit history so bad. ; (

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @ujsquared, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

I've undertaken a significant overhaul of the application's frontend, focusing on a complete redesign of the homepage and the introduction of a dedicated login flow. The primary goal was to transform the static landing page into a more interactive, forum-style experience while also establishing a clear and functional authentication entry point. This involved extensive UI component refactoring, the adoption of a distinct brutalist design language, and essential configuration updates to ensure seamless operation.

Highlights

  • New Homepage Design: I've introduced a completely new homepage experience, transforming the landing page into a dynamic forum-like interface. This includes dedicated sections for 'Threads' with subforums and a comprehensive sidebar displaying 'Recent Topics', 'Online Users', and 'Forum Stats'.
  • Dedicated Login Page: A new login page has been added, providing a clear entry point for users. It features a prominent 'Login with Google' button, streamlining the authentication process and integrating with the backend's OAuth flow.
  • UI Component Refactoring: I've refactored the Header and Footer components, moving them from the LandingPage directory to a more general ui directory. This improves component reusability and project organization, making them accessible across different pages.
  • Brutalist Design Implementation: The visual style of the application has been significantly updated to embrace a 'neo-brutalist' aesthetic. This involves introducing new component-specific CSS for buttons and cards, characterized by bold borders, strong shadows, and distinct color palettes. The hero section's animated elements have also been removed for a cleaner, more direct look.
  • Environment Variable Alignment: I've updated environment variable names and values in both the server and web applications to ensure consistent and correct communication between frontend and backend services, particularly for local development setups.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@ujsquared
Copy link
Contributor Author

ujsquared commented Aug 7, 2025

@iamanishx @neoandmatrix look

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new homepage and login page, along with significant refactoring of components and styles. The changes are well-structured, moving components into a ui directory and separating CSS for better modularity. My feedback focuses on improving correctness, maintainability, and cleaning up some leftover debug code. I've pointed out a potential issue with button navigation on the landing page, a missing protocol in an environment variable, and opportunities to improve the new homepage component by extracting hardcoded data.

@ujsquared
Copy link
Contributor Author

need the backend apis soon.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new homepage and login page, along with significant refactoring of styles and components. The changes are generally good, moving towards a more component-based and organized structure. However, I've identified a few issues, including a critical accessibility problem with color contrast, some invalid HTML structure, and several opportunities for code cleanup and consistency improvements. Addressing these will enhance the quality and maintainability of the codebase.

@neoandmatrix
Copy link
Member

Beautiful design, just maybe can the home button be bit darker?

@ujsquared
Copy link
Contributor Author

Beautiful design, just maybe can the home button be bit darker?

han wo sab toh finalise kaha hua hai. data also hardcoded. But ya mostly this I'm guessing.
Maybe add a sidebar button to navigate through my profile my posts notifications etc?

@iamanishx
Copy link
Contributor

damnnn looks so good lemme review

@iamanishx
Copy link
Contributor

image ?

Signed-off-by: ujsquared <ujsquared@gmail.com>
@ujsquared
Copy link
Contributor Author

/gemini could you review please?

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new homepage and login page, along with a significant and well-structured refactoring of styles and components. Key improvements include moving component-specific styles into their own files and organizing shared components under apps/web/src/components/ui. However, there are a few areas that need attention. The new homepage uses a fragile method for assigning colors to cards based on their index, which could lead to unpredictable UI changes. Additionally, there are some redundant CSS variable definitions and leftover debugging logs that should be cleaned up. These points were noted in the pull request description, and this review provides specific locations for the fixes.

Signed-off-by: ujsquared <ujsquared@gmail.com>
@ujsquared ujsquared changed the title Homepage homepage & user-details page. Along with backend. Aug 12, 2025
Signed-off-by: ujsquared <ujsquared@gmail.com>
Signed-off-by: ujsquared <ujsquared@gmail.com>
@ujsquared
Copy link
Contributor Author

/gemini review

@iamanishx @neoandmatrix

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a significant amount of new functionality, including a new homepage, user profile pages, and the corresponding backend endpoints. The implementation of authentication using AuthContext on the frontend and middleware on the backend is well-structured. The new pages are well-designed and functional.

My review focuses on improving code quality, maintainability, and security. Key areas for improvement include:

  • Enhancing security by validating request bodies on the server.
  • Reducing code duplication in backend route handlers.
  • Improving the robustness of frontend component styling by avoiding index-based logic.
  • Ensuring consistent use of CSS variables for theming.

Overall, this is a great contribution. Addressing these points will make the codebase more robust and easier to maintain in the long run.

@ujsquared
Copy link
Contributor Author

some linting errors, ofc lacks the finesse. But let's get a working prototype first.

@iamanishx
Copy link
Contributor

iamanishx commented Aug 14, 2025

image

bhaii dikhh nai rha dark mode me

@iamanishx
Copy link
Contributor

linting ai se fix karwa de na

Copy link
Member

@neoandmatrix neoandmatrix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Css and frontend not reviewed rest looks great.

@ujsquared
Copy link
Contributor Author

ujsquared commented Aug 14, 2025

bhaii dikhh nai rha dark mode me

dark mode ignore for now. needs revamp, colors are very contrasting and less varied. just check functionality in light mode for now.

@ujsquared
Copy link
Contributor Author

Css and frontend not reviewed rest looks great.

ek bar clone krke dekhle

Signed-off-by: imanishx <manishbiswal754@gmail.com>
@iamanishx
Copy link
Contributor

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces significant new functionality, including a homepage for authenticated users, user profile pages (view and edit), and the backend APIs to support them. The implementation includes a robust authentication flow with a React Context, new routes, and data transfer objects. The frontend styling has also been updated to a "brutalism" theme, with CSS refactored for better modularity. My review focuses on improving code maintainability by reducing duplication, removing redundant checks, fixing potential UI bugs in different themes, and aligning the implementation with best practices.

Comment on lines +89 to +93
if (!userId) {
return reply
.status(401)
.send({ error: "Unauthorized", success: false });
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This if (!userId) check is redundant. The authenticateUser middleware, which runs before this handler, already ensures that the user is authenticated. If the user were not authenticated (i.e., no valid token), the middleware would have sent a 401 Unauthorized response and the request would not have reached this handler. You can safely remove this check. The same applies to the PATCH /me route at line 139.

Comment on lines +50 to +51
const backendUrl =
import.meta.env.VITE_BACKEND_API_URL || "http://localhost:3000";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The logic to determine the backendUrl is duplicated across several new files, including login.tsx, my.profile.tsx, and profile.$username.tsx. This can lead to maintenance issues if the URL needs to be updated in the future.

To centralize this, you could create a utility file (e.g., apps/web/src/lib/api.ts) that exports the backend URL.

Example apps/web/src/lib/api.ts:

export const backendUrl =
	import.meta.env.VITE_BACKEND_API_URL || "http://localhost:3000";

Then you can import and use it wherever needed:

import { backendUrl } from "@/lib/api";

// ...
const response = await fetch(`${backendUrl}/user/me`, { ... });

This will make your code more maintainable by following the DRY (Don't Repeat Yourself) principle.

Comment on lines +167 to +174
className={`neo-brutal-card p-6 ${
[
"neo-brutal-card-yellow",
"neo-brutal-card-red",
"neo-brutal-card-green",
"neo-brutal-card-blue",
][idx % 4]
}`}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The card color is determined by the item's index (idx % 4). As noted in your pull request description, this approach is fragile because changes in the data's order (e.g., sorting, filtering) will alter the colors of the cards, leading to an inconsistent user experience.

A more robust solution is to include the style variant as a property within each object in the forumData and recentTopics arrays.

Example data modification:

const forumData = [
	{
		id: 1,
		title: "IIIT Official",
        // ...
		variant: "yellow",
	},
    // ...
];

And its usage:

{forumData.map((forum) => (
    <div
        key={forum.id}
        className={`neo-brutal-card p-6 neo-brutal-card-${forum.variant}`}
    >
        {/* ... */}
    </div>
))}

This makes the component's appearance predictable and independent of data ordering.

handleInputChange("username", e.target.value)
}
placeholder="Enter a unique username"
className="neo-brutal-input text-white"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using the text-white class for input fields will cause readability issues in light mode, as the text will be white on a light background.

To ensure the text color adapts to the current theme, you should use a theme-aware utility class like text-foreground instead. This comment applies to all the Input and select components in this form that use text-white.

Suggested change
className="neo-brutal-input text-white"
className="neo-brutal-input text-foreground"

value={formData.bio}
onChange={(e) => handleInputChange("bio", e.target.value)}
placeholder="Tell others about yourself..."
className="border-red-500 neo-brutal-input min-h-[100px] w-full resize-vertical text-white "

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The textarea for the bio has a border-red-500 class applied. This seems to be a leftover from debugging or styling for an error state and makes the border permanently red. It should be removed to match the styling of the other input fields.

Suggested change
className="border-red-500 neo-brutal-input min-h-[100px] w-full resize-vertical text-white "
className="neo-brutal-input min-h-[100px] w-full resize-vertical text-white "


export default function ProfilePage() {
const { username } = useParams<{ username: string }>();
const { user: _currentUser } = useAuth();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The _currentUser variable is declared and assigned a value from useAuth(), but it's never used in this component. It should be removed to clean up the code.

Suggested change
const { user: _currentUser } = useAuth();
const { user } = useAuth();

}

.neo-brutal-card-blue {
background-color: #4281ff;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The background-color for .neo-brutal-card-blue is hardcoded to #4281ff. However, a CSS variable --brutal-blue is defined in apps/web/src/index.css with this exact value.

To improve maintainability and consistency, you should use the CSS variable here.

Suggested change
background-color: #4281ff;
background-color: var(--brutal-blue);

@iamanishx
Copy link
Contributor

@ujsquared @neoandmatrix i think this PR is merge ready i have added the required zod validation and also added the userid in the request section of fastify so it will let ts know that userid present in the request .

Signed-off-by: imanishx <manishbiswal754@gmail.com>
Signed-off-by: imanishx <manishbiswal754@gmail.com>
@burgerphilic18
Copy link
Contributor

can I work on the dark mode design of this page?

@iamanishx
Copy link
Contributor

can I work on the dark mode design of this page?

Sure we will merge this today then after that please work on it

Signed-off-by: imanishx <manishbiswal754@gmail.com>
Signed-off-by: imanishx <manishbiswal754@gmail.com>
Signed-off-by: imanishx <manishbiswal754@gmail.com>
@ujsquared
Copy link
Contributor Author

can I work on the dark mode design of this page?

dm me on WhatsApp.

@ujsquared
Copy link
Contributor Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces significant new functionality, including the homepage, user details page, and corresponding backend APIs for users, topics, threads, and posts. The changes are extensive and well-structured. I've provided feedback on several points to enhance correctness, maintainability, and user experience. Key areas for improvement include making UI components data-driven, fixing minor bugs in the frontend and backend, and refactoring some redundant code in the API routes. Overall, this is a great contribution that lays a solid foundation for the application's core features.

vote: integer("vote"),
content: text("content"),
vote: integer("vote").default(0),
content: text("content").notNull(),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

It's great that you've made the content field non-nullable. However, the post table is missing a relationship back to the users table for the createdBy field. This is important for data integrity and for easily querying posts by a user.

You've correctly defined createdBy but the foreign key relationship is missing. You should add drizzle-orm's relations to establish this link.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes yes thought of this will add it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ujsquared ye wala kardiyo

Comment on lines 39 to 44
const userId = request.userId;
if (!userId) {
return reply
.status(401)
.send({ error: "Unauthorized", success: false });
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

This block of code is a redundant check for userId. You've already performed the same check on lines 17-22. You can safely remove this second check.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamanishx PTAL

Comment on lines +223 to +230
const deletedUser = await DrizzleClient.delete(users).where(
eq(users.id, authenticateduserId),
);
if (!deletedUser) {
return reply
.status(404)
.send({ error: "User not found", success: false });
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The check if (!deletedUser) is likely incorrect. The delete method from Drizzle ORM doesn't return the deleted record(s) by default (unless you use .returning()). It typically returns a result object which is truthy even if no rows were deleted. Since you already check if the user exists on line 217, this check is both incorrect and redundant. You can remove it.

Suggested change
const deletedUser = await DrizzleClient.delete(users).where(
eq(users.id, authenticateduserId),
);
if (!deletedUser) {
return reply
.status(404)
.send({ error: "User not found", success: false });
}
await DrizzleClient.delete(users).where(
eq(users.id, authenticateduserId),
);

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh my bad lol i forgot abt this 😭
Will fix it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamanishx PTAL

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ujsquared commit this one too


export type Thread = typeof threads.$inferSelect;

// threadIdParamsSchema already declared above

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This comment is misleading as threadIdParamsSchema is declared at the end of the file. For better readability and to avoid confusion, it's a good practice to declare shared schemas and types at the top of the file before they are referenced.

export const threadIdParamsSchema = z.object({
	id: z.string().uuid(),
});

// threadIdParamsSchema already declared above

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamanishx PTAL

Comment on lines +3 to +7
declare module "fastify" {
interface FastifyRequest {
userId?: string;
}
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This file contains two separate declare module "fastify" blocks. For better organization and to avoid potential declaration merging issues, it's best to combine them into a single block.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ujsquared dont commit this one will check it out later we don't need this rn

@@ -1,4 +1,5 @@
import { Instagram, Linkedin, Mail, Twitter } from "lucide-react";
import "@/styles/components/card.css";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This import for card.css seems out of place in a footer component and is likely a copy-paste artifact. It should be removed to avoid loading unnecessary styles.

Comment on lines +242 to +257
<select
id="pronouns"
value={formData.pronouns}
onChange={(e) =>
handleInputChange("pronouns", e.target.value)
}
className="neo-brutal-input w-full text-white"
>
<option value="">Select your pronouns</option>
<option value="he/him">he/him</option>
<option value="she/her">she/her</option>
<option value="they/them">they/them</option>
<option value="he/they">he/they</option>
<option value="she/they">she/they</option>
<option value="other">Other</option>
</select>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

When a user selects "Other" for their pronouns, there is no input field for them to specify what they are. This leads to a poor user experience. You should conditionally render a text input when formData.pronouns === 'other' to allow users to enter their custom pronouns.

value={formData.bio}
onChange={(e) => handleInputChange("bio", e.target.value)}
placeholder="Tell others about yourself..."
className="border-red-500 neo-brutal-input min-h-[100px] w-full resize-vertical text-white "

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The textarea for the bio has a border-red-500 class, which makes its border red unconditionally. This appears to be a leftover from debugging and should be removed for the final version.

Suggested change
className="border-red-500 neo-brutal-input min-h-[100px] w-full resize-vertical text-white "
className="neo-brutal-input min-h-[100px] w-full resize-vertical text-white "

}

.neo-brutal-card-blue {
background-color: #4281ff;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

You're using a hardcoded hex value for the blue card background. To improve maintainability and consistency with your theme, you should use the --brutal-blue CSS variable that you've defined in index.css.

Suggested change
background-color: #4281ff;
background-color: var(--brutal-blue);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamanishx PTAL

Signed-off-by: Spandan Hota <spandanhota2005@outlook.com>
Signed-off-by: Spandan Hota <spandanhota2005@outlook.com>
@gemini-code-assist gemini-code-assist bot mentioned this pull request Sep 23, 2025
@iamanishx
Copy link
Contributor

@ujsquared @neoandmatrix merging this one ..... as i have almost completed the backend in this pr

@iamanishx iamanishx merged commit 2baa571 into main Dec 8, 2025
2 checks passed
@iamanishx
Copy link
Contributor

@ujsquared yarr bo bug wala badge kyun ni mila ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants