π Step-by-Step Setup & Documentation
This guide includes installation steps, setup, and file explanations to make it easy for anyone to understand and explain.
π Project Setup: Step-by-Step Guide
1οΈβ£ Install Node.js & SQLite
Check if Node.js is installed:
- Open Terminal / Command Prompt and type:Β
node -v - If it shows a version (like
v18.x.x), youβre good! - If not, download & install Node.js from nodejs.org.
- Open Terminal / Command Prompt and type:
Install SQLite3:
- Install SQLite globally by running:Β
npm install -g sqlite3Β - Check if it’s installed:
sqlite3 --version
- Install SQLite globally by running:
Β
2οΈβ£ Setup the Project
π Create a new folder and navigate into it:
mkdir node-sqlite-project
cd node-sqlite-project
π Initialize the project (creates package.json)
Β
npm init -y
π Install dependencies
npm install express sqlite3 cors
Create Required Files
Inside sqlite-node-form/, create the following files:
π sqlite-node-form/
βββ server.js (Backend API)
βββ database.js (Database connection & queries)
βββ database.db (SQLite database)
βββ public/ (Frontend files)
β βββ index.html (Main UI)
β βββ style.css (Styling)
β βββ script.js (Handles form submissions)
π File Explanations
π server.js –
Backend Server
- Uses Express.js for handling routes
- Connects to SQLite database
- Manages form submissions & fetching users
- Stores user details
- Fetches city dropdowns based on selected state
π index.html – Frontend Form
- Contains two forms:
β User Registration Form
β Search User by Email Form - Calls backend APIs (
/submit,/getUser,/cities/:state)
π style.css – Styling
- Beautifies the form, buttons, input fields
- Proper spacing and layout for good UX
- Ensures both forms are visually separate & readable
π script.js – Frontend Logic
- Handles form submission (sends data to server)
- Fetches cities based on selected state
- Displays user data in a neat format