DEV Community: Elvis Munene

my journey with next,js and django for the past two weeks.

Elvis Munene — Mon, 16 Sep 2024 19:37:18 +0000

My Journey with Next.js and Django: Building a Finance App and Polling App
Introduction
In this article, I'll walk you through two projects I’ve built using Next.js and Django. The first is a simple finance app built with Next.js, PostgreSQL, and deployed on Vercel. The second is a polling app developed using Django, with models for questions and choices.

Table of Contents
Next.js Finance App
Introduction
Project Setup
Styling
Routing
Data Fetching
Error Handling
Form Validation
Authentication
Optimization
Deployment on Vercel
Django Polling App
Introduction
Models: Question and Choice
Admin Site
Views and Templates
URL Routing
Voting and Tallying
Error Handling
Deployment
Next.js Finance App

Introduction The finance app allows users to log in, create invoices, manage customers, and perform CRUD operations (Create, Read, Update, Delete). We use PostgreSQL as the database, and I followed MySQL logic for data management.

This project was deployed on Vercel, leveraging its seamless integration with Next.js.

Project Setup To set up a Next.js app, I initialized the project using the following command:

bash
Copy code
npx create-next-app@latest finance-app
cd finance-app
npm install
Key Dependencies:

PostgreSQL (pg)
Authentication (next-auth)
Database Setup:

bash
Copy code
npm install pg
I connected to PostgreSQL by creating a db.js file:

javascript
Copy code
import { Pool } from 'pg';

const pool = new Pool({
user: 'yourUser',
host: 'localhost',
database: 'finance_db',
password: 'yourPassword',
port: 5432,
});

export default pool;

Styling For styling, I used CSS Modules and styled-components:

javascript
Copy code
import styles from './Home.module.css';

function HomePage() {
return (

Welcome to Finance App

);
}

Routing Next.js uses a file-based routing system. For each page, a corresponding .js file is created inside the pages/ directory.

Example:

bash
Copy code
/pages/invoice.js
The routing looks like:

javascript
Copy code
import Link from 'next/link';

function Invoice() {
return (

Invoices

View Customers

);
}

export default Invoice;

Data Fetching Next.js supports Server-Side Rendering (SSR) and Static Generation. For my app, I used getServerSideProps to fetch invoice data:

javascript
Copy code
export async function getServerSideProps() {
const res = await fetch('http://api.yourapp.com/invoices');
const invoices = await res.json();

return {
props: {
invoices,
},
};
}

Error Handling Error handling was implemented using a combination of try-catch blocks and a custom error page (pages/_error.js):

javascript
Copy code
try {
const res = await fetch(...);
if (!res.ok) throw new Error('Failed to fetch data');
} catch (error) {
console.error(error);
return { props: { error: 'Failed to load data' } };
}

Form Validation For form validation, I used Formik and Yup:

bash
Copy code
npm install formik yup
Sample code:

javascript
Copy code
import { useFormik } from 'formik';
import * as Yup from 'yup';

const formik = useFormik({
initialValues: { name: '' },
validationSchema: Yup.object({
name: Yup.string().required('Name is required'),
}),
onSubmit: (values) => {
console.log(values);
},
});

Authentication NextAuth.js was used for authentication, supporting multiple providers:

bash
Copy code
npm install next-auth
Set up authentication in pages/api/auth/[...nextauth].js:

javascript
Copy code
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
providers: [
Providers.Google({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
});

Optimization For performance optimization, I used lazy loading for images and components:

javascript
Copy code
const LazyComponent = dynamic(() => import('../components/LazyComponent'));

Deployment on Vercel Deployment on Vercel was seamless:

bash
Copy code
vercel deploy
You can view the app live at: Finance App Link.

Django Polling App

Introduction
The polling app is a simple web application where users can vote on polls. There are two models: Question and Choice.
Models: Question and Choice
I defined two models in models.py:

python
Copy code
from django.db import models

class Question(models.Model):
question_text = models.CharField(max_length=200)
pub_date = models.DateTimeField('date published')

class Choice(models.Model):
question = models.ForeignKey(Question, on_delete=models.CASCADE)
choice_text = models.CharField(max_length=200)
votes = models.IntegerField(default=0)

Admin Site To manage the polls, I registered the models in the Django admin:

python
Copy code
from django.contrib import admin
from .models import Question, Choice

admin.site.register(Question)
admin.site.register(Choice)

Views and Templates I created views for listing polls and voting. For example, the view for poll detail:

python
Copy code
from django.shortcuts import render, get_object_or_404
from .models import Question

def detail(request, question_id):
question = get_object_or_404(Question, pk=question_id)
return render(request, 'polls/detail.html', {'question': question})

URL Routing The URL configuration for the polls:

python
Copy code
from django.urls import path
from . import views

urlpatterns = [
path('int:question_id/', views.detail, name='detail'),
]

Voting and Tallying The voting view updates the vote tally:

python
Copy code
def vote(request, question_id):
question = get_object_or_404(Question, pk=question_id)
selected_choice = question.choice_set.get(pk=request.POST['choice'])
selected_choice.votes += 1
selected_choice.save()
return redirect('polls:results', question_id=question.id)

Error Handling Django handles errors gracefully with its built-in middleware. I used custom 404 and 500 error pages for better user experience.

python
Copy code
def custom_404_view(request, exception):
return render(request, '404.html', status=404)

Deployment I deployed the Django polling app using Heroku. It integrates easily with PostgreSQL and Django’s settings.

bash
Copy code
heroku create
git push heroku master
The app is live at: Polling App Link.

Conclusion

Documentation: Finance App (Next.js) & Polling App (Django)

Elvis Munene — Mon, 16 Sep 2024 13:49:18 +0000

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.