TM
TMTM
A comprehensive log of building a login page from scratch for a community app
Goal: Build a community application with user authentication, channels, and article management features. In this article, I cover a small part of it, i.e, creating a working sign up and login page
Tech Stack:
Frontend: React + Bootstrap
Backend: Node.js + Express
Database: PostgreSQL (Supabase)
Tools: Cursor IDE, PowerShell
Important Note : I am new to web application development. My process to learn something new is driven by Claude as my AI mentor. My strategy to learn has always been through building something useful. Also, I wanted to challenge myself and keep full trust on AI to see how far I can go.
My 7 step rule for AI assisted learning :
1. Keep your work versioned from the get go.
2. Trust AI. Do what it says
3. Ask AI to consider myself a noob, hence go slow, precise and wait for me to respond with a query or response
4. Keep showing AI proof of my work. Ex. snapshots of outcomes
5. Version every key milestone (Seriously, do git add, commit, push again and again)
6. Roll back if things break at any step
7. Document, Host and Go live!
What I Did:
Created main project folder: enqurious-tribe
Set up separate frontend and backend directories
Initialized React app with TypeScript template
Set up Node.js backend with Express
Key Learning:
Proper project structure separation makes development cleaner and easier to manage.
The Problem:
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package...
What I Tried:
Standard Tailwind installation
Manual PostCSS configuration
Different PostCSS plugin approaches
Connection string parsing with special characters
The Solution: Switched to Bootstrap for simplicity and reliability.
Key Learning:
Sometimes the simpler, more established solution (Bootstrap) is better than the trendy one (Tailwind) when you need to focus on functionality over styling experimentation.
What We Built:
const express = require('express');
const cors = require('cors');
require('dotenv').config();
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
Key Learning:
CORS and JSON middleware are essential for frontend-backend communication.
Challenge 1: Environment Variables Not Loading
DB_HOST: undefined
DB_USER: undefined
DB_NAME: undefined
Root Cause: Incorrect dotenv configuration Solution:
require('dotenv').config({ path: path.join(__dirname, '.env') });
Challenge 2:
Database Connection Failures :
Error 1: The server does not support SSL connections
Error 2: ENOTFOUND db.xxxxxxxxxx.supabase.co
Root Cause: IPv4 compatibility issues with Supabase
Solution: Used Session Pooler instead of Direct Connection
Key Learning:
Database connection issues are common. Always check: 1) Environment variables loading, 2) Network connectivity, 3) SSL configuration, 4) IPv4/IPv6 compatibility.
Initial Approach: Plain text password storage
if (user.password !== password) {
return res.status(401).json({ error: 'Invalid email or password' });
}
Security Enhancement: bcrypt password hashing
// Registration
const hashedPassword = await bcrypt.hash(password, 10);
// Login
const isValidPassword = await bcrypt.compare(password, user.password);
Key Learning:
Never store passwords in plain text. Password hashing is one-way encryption - you cannot recover the original password, only verify if an input matches.
What I Implemented:
Form input state management with useState
User authentication state
Toggle between login and registration forms
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [user, setUser] = useState<User | null>(null);
Challenge: Connection Refused Errors
Cause: Backend server not running simultaneously with frontend
Solution: Keep both servers running:
Frontend: localhost:3000 (React)
Backend: localhost:5000 (Node.js)
Key Learning:
Full-stack development requires managing multiple running processes. Always ensure both frontend and backend servers are active.
Implementation:
const response = await fetch('http://localhost:5000/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password })
});
Key Learning:
Proper HTTP headers and JSON stringification are crucial for successful API communication.
Features Implemented:
Welcome message with user data
Quick stats cards (channels, articles, comments)
Recent activity simulation
Quick action buttons
Logout functionality
Key Learning:
A good dashboard provides both welcome/overview information and quick access to key features.
Flow Implemented:
Login/Registration Form → Authentication → Dashboard → Logout → Back to Login
Key Learning:
Managing application state transitions requires careful consideration of when to show which components.
Challenge | Initial Approach | Solution | Learning |
|---|---|---|---|
PostCSS Configuration | Complex Tailwind setup | Switch to Bootstrap | Choose tools based on project needs, not trends |
Database Connection | Direct connection | Session pooler | Always have fallback connection methods |
Environment Variables | Basic dotenv | Explicit path configuration | Debug environment loading systematically |
Password Storage | Plain text | bcrypt hashing | Security should never be an afterthought |
Server Management | Single process focus | Concurrent server management | Full-stack requires process orchestration |
State Management | Component-level only | Application-level state | Plan state architecture early |
Understanding Promises and async/await
API calls and response handling
Database query execution
Password hashing with bcrypt
Environment variable management
SQL injection prevention with parameterized queries
PostgreSQL with Node.js
Connection pooling
SQL query writing and debugging
RESTful endpoint design
HTTP status codes
Request/response handling
Error management
CORS configuration
JSON data exchange
State management across components
User session handling
Step-by-step isolation: When PostCSS failed, we systematically removed complexity
Environment verification: Always verify environment variables are loading
Network connectivity testing: Use tools like ping/nslookup for connection issues
Pragmatic choices: Bootstrap over Tailwind when facing setup issues
Familiar tools: PowerShell commands adapted for Windows environment
IDE efficiency: Cursor IDE provided good development experience
Modern practices: Changed from 'master' to 'main' branch
Meaningful commits: Clear commit messages describing functionality
enqurious-tribe/
├── frontend/ # React application
├── backend/ # Node.js API
└── README.md
Impact: Clean separation of concerns, easy to understand and manage.
CREATE TABLE users (
id SERIAL PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Impact: Simple, focused user management foundation.
POST /api/register # User registration
POST /api/login # User authentication
GET /api/test # Health check
GET /api/db-test # Database connectivity
Impact: Clear, RESTful endpoints that are easy to understand and test.
Channels System
Create/join channels
Channel-specific content
Articles Management
Create/edit articles
Article browsing and search
Engagement Features
Comments system
Like/reaction functionality
User Management
Password reset functionality
User profiles and preferences
Systematic problem-solving approach
Willingness to adapt when tools didn't work
Step-by-step learning progression
Security-conscious development
Tool configuration issues (Tailwind/PostCSS)
Database connection debugging
Managing multiple development processes
Understanding asynchronous operations
Simplicity often wins: Bootstrap over Tailwind resolved many issues
Security is fundamental: Password hashing should be implemented from the start
Environment matters: Proper configuration management is crucial
Full-stack coordination: Managing frontend and backend simultaneously requires attention
Debugging skills: Systematic isolation of problems accelerates resolution
✅ Full-stack application architecture
✅ React with TypeScript development
✅ Node.js and Express API development
✅ PostgreSQL database integration
✅ User authentication and authorization
✅ Password security with bcrypt
✅ Frontend-backend communication
✅ Bootstrap responsive design
✅ Environment configuration management
✅ Git workflow and modern practices
This document serves as both a learning log and a reference for future full-stack development projects. The journey from initial setup challenges to a working authentication system demonstrates the importance of persistence, systematic problem-solving, and security-conscious development practices.
Running data quality checks on retail sales distribution data
This blog explores my experience with cleaning datasets during the process of performing EDA for analyzing whether geographical attributes impact sales of beverages
Snowflake recommends 100–250 MB files for optimal loading, but why? What happens when you load one large file versus splitting it into smaller chunks? I tested this with real data, and the results were surprising. Click to discover how this simple change can drastically improve loading performance.
Master the bronze layer foundation of medallion architecture with COPY INTO - the command that handles incremental ingestion and schema evolution automatically. No more duplicate data, no more broken pipelines when new columns arrive. Your complete guide to production-ready raw data ingestion
Learn Git and GitHub step by step with this complete guide. From Git basics to branching, merging, push, pull, and resolving merge conflicts—this tutorial helps beginners and developers collaborate like pros.
Discover how data management, governance, and security work together—just like your favorite food delivery app. Learn why these three pillars turn raw data into trusted insights, ensuring trust, compliance, and business growth.
Beginner’s journey in AWS Data Engineering—building a retail data pipeline with S3, Glue, and Athena. Key lessons on permissions, data lakes, and data quality. A hands-on guide for tackling real-world retail datasets.
A simple request to automate Google feedback forms turned into a technical adventure. From API roadblocks to a smart Google Apps Script pivot, discover how we built a seamless system that cut form creation time from 20 minutes to just 2.
Step-by-step journey of setting up end-to-end AKS monitoring with dashboards, alerts, workbooks, and real-world validations on Azure Kubernetes Service.
My learning experience tracing how an app works when browser is refreshed
Demonstrates the power of AI assisted development to build an end-to-end application grounds up
This is the first in a five-part series detailing my experience implementing advanced data engineering solutions with Databricks on Google Cloud Platform. The series covers schema evolution, incremental loading, and orchestration of a robust ELT pipeline.
Discover the 7 major stages of the data engineering lifecycle, from data collection to storage and analysis. Learn the key processes, tools, and best practices that ensure a seamless and efficient data flow, supporting scalable and reliable data systems.
This blog is troubleshooting adventure which navigates networking quirks, uncovers why cluster couldn’t reach PyPI, and find the real fix—without starting from scratch.
Explore query scanning can be optimized from 9.78 MB down to just 3.95 MB using table partitioning. And how to use partitioning, how to decide the right strategy, and the impact it can have on performance and costs.
Dive deeper into query design, optimization techniques, and practical takeaways for BigQuery users.
Wondering when to use a stored procedure vs. a function in SQL? This blog simplifies the differences and helps you choose the right tool for efficient database management and optimized queries.
Discover how BigQuery Omni and BigLake break down data silos, enabling seamless multi-cloud analytics and cost-efficient insights without data movement.
In this article we'll build a motivation towards learning computer vision by solving a real world problem by hand along with assistance with chatGPT
This blog explains how Apache Airflow orchestrates tasks like a conductor leading an orchestra, ensuring smooth and efficient workflow management. Using a fun Romeo and Juliet analogy, it shows how Airflow handles timing, dependencies, and errors.
The blog underscores how snapshots and Point-in-Time Restore (PITR) are essential for data protection, offering a universal, cost-effective solution with applications in disaster recovery, testing, and compliance.
The blog contains the journey of ChatGPT, and what are the limitations of ChatGPT, due to which Langchain came into the picture to overcome the limitations and help us to create applications that can solve our real-time queries
This blog simplifies the complex world of data management by exploring two pivotal concepts: Data Lakes and Data Warehouses.
demystifying the concepts of IaaS, PaaS, and SaaS with Microsoft Azure examples
Discover how Azure Data Factory serves as the ultimate tool for data professionals, simplifying and automating data processes
Revolutionizing e-commerce with Azure Cosmos DB, enhancing data management, personalizing recommendations, real-time responsiveness, and gaining valuable insights.
Highlights the benefits and applications of various NoSQL database types, illustrating how they have revolutionized data management for modern businesses.
This blog delves into the capabilities of Calendar Events Automation using App Script.
Dive into the fundamental concepts and phases of ETL, learning how to extract valuable data, transform it into actionable insights, and load it seamlessly into your systems.
An easy to follow guide prepared based on our experience with upskilling thousands of learners in Data Literacy
Teaching a Robot to Recognize Pastries with Neural Networks and artificial intelligence (AI)
Streamlining Storage Management for E-commerce Business by exploring Flat vs. Hierarchical Systems
Figuring out how Cloud help reduce the Total Cost of Ownership of the IT infrastructure
Understand the circumstances which force organizations to start thinking about migration their business to cloud