A full-stack web application built with Node.js, Express, and SQLite, featuring both a RESTful API and a modern web interface for user management. This application provides CRUD operations through both API endpoints and a user-friendly web interface.
- 🚀 Full RESTful API implementation
- 💻 Modern web interface with responsive design
- 📱 Mobile-friendly UI
- 🔄 Real-time updates
- 🎯 CRUD operations for user management
- 🗄️ SQLite database for data persistence
- ✨ Clean and intuitive user interface
- 🛡️ Error handling and validation
- 🔄 Development mode with auto-reload
- Node.js (v12 or higher)
- npm (Node Package Manager)
- Modern web browser
- Clone the repository:
git clone <repository-url>
cd node.js- Install dependencies:
npm install- Create a
.envfile in the root directory:
PORT=3000
For development (with auto-reload):
npm run devFor production:
npm startThe server will start at http://localhost:3000
The application includes a user-friendly web interface that can be accessed by opening http://localhost:3000 in your web browser. The interface provides:
- A form to add new users
- A list of all existing users
- Edit functionality through a modal window
- Delete functionality with confirmation
- Real-time error handling and success messages
- Responsive design for both desktop and mobile devices
- GET
/api/users- Get all users - GET
/api/users/:id- Get a specific user by ID - POST
/api/users- Create a new user{ "name": "John Doe", "email": "[email protected]" } - PUT
/api/users/:id- Update an existing user{ "name": "John Doe Updated", "email": "[email protected]" } - DELETE
/api/users/:id- Delete a user
.
├── app.js # Application entry point and server configuration
├── database.js # Database configuration and SQL query wrapper functions
├── database.sqlite # SQLite database file (auto-generated)
├── .env # Environment variables configuration
├── .gitignore # Git ignore configuration
├── public/ # Static files for the web interface
│ ├── app.js # Client-side JavaScript for UI interactions
│ ├── index.html # Main HTML file with user interface
│ └── styles.css # CSS styles for modern UI design
├── routes/
│ └── users.js # User-related API routes and controllers
└── package.json # Project dependencies and scripts
-
Backend
app.js: Express server setup, middleware configuration, and route integrationdatabase.js: SQLite database connection and Promise-based query methodsroutes/users.js: API endpoints for user management
-
Frontend
public/index.html: Responsive web interface with forms and user listpublic/app.js: Frontend JavaScript for API integration and DOM manipulationpublic/styles.css: Modern CSS styling with responsive design
CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
email TEXT UNIQUE NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)GET /api/users- Retrieve all usersGET /api/users/:id- Retrieve a specific userPOST /api/users- Create a new userPUT /api/users/:id- Update an existing userDELETE /api/users/:id- Delete a user
-
Web Interface (Recommended)
- Navigate to
http://localhost:3000in your browser - Use the intuitive UI to:
- View all users in a responsive list
- Add new users through the form
- Edit users via the modal dialog
- Delete users with confirmation
- Navigate to
-
API Testing Tools
- Use Postman or similar tools
- Import the following endpoints:
GET http://localhost:3000/api/users GET http://localhost:3000/api/users/:id POST http://localhost:3000/api/users PUT http://localhost:3000/api/users/:id DELETE http://localhost:3000/api/users/:id
-
cURL Commands
# Get all users curl http://localhost:3000/api/users # Create a new user curl -X POST -H "Content-Type: application/json" \ -d '{"name":"John Doe","email":"[email protected]"}' \ http://localhost:3000/api/users # Get a specific user curl http://localhost:3000/api/users/1 # Update a user curl -X PUT -H "Content-Type: application/json" \ -d '{"name":"John Updated","email":"[email protected]"}' \ http://localhost:3000/api/users/1 # Delete a user curl -X DELETE http://localhost:3000/api/users/1
npm start: Run the application in production modenpm run dev: Run the application in development mode with auto-reload
The application includes comprehensive error handling:
- Frontend: Visual error messages with automatic dismissal
- Backend: Proper HTTP status codes and error messages
- Database: SQLite error handling and connection management
Potential improvements that could be added:
- User authentication and authorization
- Input validation middleware
- Data pagination for large datasets
- Unit and integration tests
- Docker containerization
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
