Project 1: Finance App (Next.js)
Overview
The Finance App built using Next.js allows users to:
Log in to their accounts.
Create, delete, and edit invoices.
Add customers.
The backend is powered by PostgreSQL, with MySQL logic integrated. The application is successfully deployed on Vercel for seamless hosting and access.
Key Features
User Authentication:
Implemented using session-based authentication to ensure only authorized users can access the platform.
Invoice Management:
Users can create, edit, and delete invoices.
Invoices are stored in a PostgreSQL database, ensuring efficient and reliable data management.
Customer Management:
Users can add and manage customer information, allowing easy association with invoices.
Styling
The app's UI is designed using CSS Modules for component-level styling. This ensures:
Better maintainability.
Scoping of styles to prevent CSS conflicts.
A responsive design, offering optimal performance across devices.
Optimization
Next.js provides automatic optimization techniques:
Code splitting: Only loading JavaScript required for the current page.
Image optimization: By serving images in formats like WebP.
Pre-rendering: Statically generating pages where possible for faster load times.
Routing
Next.js's file-based routing was leveraged, allowing:
Clean and simple URL management.
Dynamic routes to handle features like customer and invoice-specific pages (/customer/[id], /invoice/[id]).
Data Fetching
The app uses both client-side and server-side data fetching techniques:
Client-side for handling real-time updates and user interactions.
Server-side rendering (SSR) for fetching invoice and customer data, ensuring SEO benefits and faster initial page loads.
Error Handling
To enhance user experience:
Custom error pages were created using Next.js’s built-in error handling (404.js, 500.js).
Try-catch blocks were used in API requests to ensure any errors during data fetching or form submissions are handled gracefully.
Form Validation
Form validation is handled using React Hook Form along with Yup for schema validation:
Ensures that users fill out forms correctly before submission.
Provides instant feedback on form errors, improving usability.
Authentication
Authentication was implemented using NextAuth.js:
Secure login with JWT-based session management.
Users are redirected to the login page if not authenticated, protecting private routes.
Meta Data & SEO
Next.js’s Head component was used for setting up meta tags (title, description) dynamically.
Enhanced SEO by utilizing SSR and metadata for better indexing by search engines.
Project 2: Polling App (Django)
Overview
The Polling App is built using Django and consists of:
A public site for users to view polls and vote.
An admin site for managing polls (adding, editing, and deleting).
Key Features
Public Polls:
Users can view ongoing polls and cast votes for their preferred choices.
Admin Management:
Admins have full control to create new polls, update existing ones, and delete outdated polls.
Models:
Question Model: Contains the poll question and its publication date.
Choice Model: Holds the text of the poll's choices and a vote tally, linked to a specific question.
Styling
The app utilizes Django’s template system to inject CSS for styling. A minimalist approach ensures:
A clean and user-friendly interface for both public and admin views.
The use of Bootstrap for responsive design and mobile compatibility.
Optimization
Database indexing on frequently queried fields like publication_date for Questions ensures faster query performance.
Django’s caching framework was used to cache frequently accessed poll data, improving speed and reducing database load.
Routing
Django’s URL routing system was implemented to:
Define clean and meaningful URLs for polls and admin pages (/polls/, /admin/).
Handle both static and dynamic URL routing, especially for voting on specific polls (/polls/[id]).
Data Fetching
Data fetching in Django is handled server-side:
Polls and choices are fetched from the database and rendered in the views using Django’s ORM.
Query optimizations like select_related and prefetch_related are used to minimize database hits and fetch related data in fewer queries.
Error Handling
Custom error views (e.g., 404.html) were created for a consistent user experience when users encounter missing pages.
Django’s form validation automatically handles errors such as incorrect submissions in both public and admin views.
Form Validation
In the admin panel, Django’s built-in form validation ensures:
Required fields are filled.
Correct data types are submitted. For the public poll, vote submission is validated to prevent duplicate or invalid votes.
Authentication
Authentication in the admin panel is managed by Django’s AdminAuth system:
Only authorized users can log in and manage polls.
Secure password management and admin user creation.
Meta Data & SEO
Meta tags and Open Graph tags were added to the poll pages to enhance SEO and ensure better sharing on social platforms.
The app benefits from Django’s SEO-friendly URL structures for better search engine rankings.
Top comments (0)