Managing university applications can be complex, but with the right system architecture, we can simplify this process. In this blog, I’ll explain two critical features of my university application project: CRUD Operations for Universities and User Authentication. These functionalities form the backbone of the project, making it robust and user-friendly.
1. CRUD Operations for Universities
CRUD (Create, Read, Update, Delete) operations are essential for managing data in any application. In this project, CRUD is implemented for handling university records. Here's how each operation works:
a. Create University
The createUniversity.ts file in the _actions folder handles the creation of new university records. Users with admin privileges can input university details, which are saved to the database using Prisma ORM.
Screenshot Suggestion:
Show the form for creating a new university and the resulting entry in the database.
b. View Universities
The viewPost.ts and page.tsx in the university folder retrieve and display university records. The UniversityCard.tsx component in ui dynamically renders the data in a clean, card-like layout.
Screenshot Suggestion:
Display the UI showing a list of universities, styled using TailwindCSS.
c. Edit University
The edit/page.tsx file provides the interface for editing a university record. The logic for updating the database is handled in updatePost.ts.
Screenshot Suggestion:
Include an example of the edit page, highlighting an editable university field.
d. Delete University
The DeleteButton.tsx component triggers the deletion process, calling the deletePost.ts action to remove a record from the database.
Screenshot Suggestion:
Show the Delete button and the confirmation dialog before deletion.
2. User Authentication
Authentication ensures secure access for users and admins. The project includes registration, login, and logout functionalities, handled with Prisma and utility functions.
a. Registration
The register/page.tsx file provides a registration form. Inputs are validated on both the client and server sides using register.ts.
Screenshot Suggestion:
Show the registration page with fields for username, email, and password.
b. Login
The login/page.tsx file is the entry point for user login. Credentials are checked against the database using login.ts.
Screenshot Suggestion:
Display the login page with fields for email and password.
c. Logout
The Logout.tsx component clears the user session, redirecting them to the login page. This ensures user data privacy.
Screenshot Suggestion:
Show the logout button and the message confirming a successful logout.
Folder Structure Overview
The project is organized into logical folders for maintainability:
-
app/api/universities/route.ts: Handles API routes for CRUD operations. -
app/university/_actions: Contains logic for creating, updating, deleting, and viewing university data. -
components/ui: Houses reusable UI components likeButton,Card, andDeleteUniversityButton.
Screenshot Suggestion:
Include a screenshot of your file structure to illustrate the organization.
Conclusion
This project leverages Prisma ORM, Next.js, and TailwindCSS to build a scalable, responsive system for managing university applications. By focusing on clean architecture and reusable components, the system is both developer- and user-friendly.
Top comments (0)