Enqurious Tribe: Full-Stack Development Learning Journey

A comprehensive log of building a login page from scratch for a community app

Project Overview

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!

Phase 1: Project Setup & Initial Challenges

1.1 Project Structure Creation

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.

1.2 The Great Tailwind CSS Challenge

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:

1. Standard Tailwind installation

2. Manual PostCSS configuration

3. Different PostCSS plugin approaches

4. 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.

Phase 2: Backend Development & Database Integration

2.1 Express Server Setup

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.

2.2 Database Connection Challenges

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.

---

2.3 Password Security Implementation

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.

Phase 3: Frontend Development & Integration

3.1 React State Management

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);

3.2 API Integration Challenges

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.

3.3 Frontend-Backend Communication

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.

Phase 4: User Experience & Dashboard

4.1 Dashboard Creation

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.

4.2 Application State Flow

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.

Technical Challenges & Solutions Summary

Key Technical Concepts Learned

1. Asynchronous Programming

• Understanding Promises and async/await

• API calls and response handling

• Database query execution

2. Security Best Practices

• Password hashing with bcrypt

• Environment variable management

• SQL injection prevention with parameterized queries

3. Database Integration

• PostgreSQL with Node.js

• Connection pooling

• SQL query writing and debugging

4. API Development

• RESTful endpoint design

• HTTP status codes

• Request/response handling

• Error management

5. Frontend-Backend Integration

• CORS configuration

• JSON data exchange

• State management across components

• User session handling

Development Workflow Learnings

1. Debugging Approach

• 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

2. Tool Selection

• 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

3. Version Control

• Modern practices: Changed from 'master' to 'main' branch

• Meaningful commits: Clear commit messages describing functionality

Architecture Decisions & Their Impact

1. Monorepo Structure

enqurious-tribe/
├── frontend/          # React application
├── backend/           # Node.js API
└── README.md

Impact: Clean separation of concerns, easy to understand and manage.

2. Database Schema Design

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.

3. API Design

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.

Future Enhancements Planned

1. Channels System

   • Create/join channels

   • Channel-specific content

2. Articles Management

   • Create/edit articles

   • Article browsing and search

3. Engagement Features

   • Comments system

   • Like/reaction functionality

4. User Management

   • Password reset functionality

   • User profiles and preferences

Final Reflections

What Went Well

• Systematic problem-solving approach

• Willingness to adapt when tools didn't work

• Step-by-step learning progression

• Security-conscious development

What Was Challenging

• Tool configuration issues (Tailwind/PostCSS)

• Database connection debugging

• Managing multiple development processes

• Understanding asynchronous operations

Key Takeaways

1. Simplicity often wins: Bootstrap over Tailwind resolved many issues

2. Security is fundamental: Password hashing should be implemented from the start

3. Environment matters: Proper configuration management is crucial

4. Full-stack coordination: Managing frontend and backend simultaneously requires attention

5. Debugging skills: Systematic isolation of problems accelerates resolution

Technical Skills Acquired

✅ 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.