Neptune's Nook

Description

This project was created as a semester long, team-based project to demonstrate our learned skills for the class. This full-stack application is a simple e-commerce website for a fictional store that sells aquarium products. Users can create an account, add items to their cart, and checkout. Admins can add multiple products in bulk by uploading a json file. Furthermore, admins can edit, update, and delete products.

My Role:

As team leader and full-stack developer, I created and implemented core server-side functionalities using Node.JS, Express.JS, and various node modules. My primary responsibilities included:

  • Developing a custom authentication system with PassportJS for secure user management
  • Designing and implementing the SQLite3 database schema
  • Creating and documenting RESTful APIs for product and user management
  • Implementing shopping cart functionality and checkout process
  • Building responsive frontend interfaces using HTML, CSS, and JavaScript
  • Managing the team’s development process and task delegation

Technical Details:

The backend infrastructure leverages several key technologies:

  • PassportJS for secure authentication with:
    • Role-based access control (Admin/User)
    • Session management and persistence
    • Local strategy implementation
    • Password encryption and security
  • SQLite3 for data management:
    • User account storage
    • Product inventory tracking
    • Shopping cart persistence
    • Order history
  • Multer for file processing:
    • Bulk product upload handling
    • JSON file validation
    • Data sanitization

The frontend infrastructure implements:

  • Vanilla CSS with media queries:
    • Mobile-first responsive design
    • Custom component styling
    • Breakpoint management for different screen sizes
    • Flexbox and Grid layouts
  • HTML5 elements and best practices:
    • Semantic markup structure
    • Accessibility considerations
    • Form validation
    • Modern HTML5 input types
  • JavaScript functionalities:
    • Dynamic cart updates
    • Form validation and submission
    • DOM manipulation for UI updates
    • Event handling and user interactions
    • AJAX calls for seamless data updates

Challenges and Solutions:

  1. Custom Local Authentication
    • Challenge: Implementing a secure authentication system beyond class material scope
    • Solution: Developed a comprehensive PassportJS implementation with local strategy, including password encryption, session management, and role-based access control
  2. File Processing
    • Challenge: Handling bulk product uploads efficiently while ensuring data integrity
    • Solution: Implemented Multer middleware for file handling, with custom validation and processing logic for JSON data, including error handling and duplicate checking
  3. Shopping Cart Implementation
    • Challenge: Maintaining cart state across sessions while handling concurrent users
    • Solution: Designed a robust cart system using session storage and database persistence, ensuring data consistency across user sessions

Results and Impact:

The platform successfully demonstrates several key achievements:

  • Secure user authentication and authorization system
  • Efficient bulk product management for administrators
  • Responsive design supporting various device sizes
  • Intuitive shopping cart experience
  • Streamlined checkout process The project received positive feedback for its functionality and user experience, serving as a practical demonstration of e-commerce website development.

Skills Learned and Demonstrated:

  • Custom authentication system development using PassportJS
  • File processing and validation with Multer
  • Database design and management with SQLite3
  • RESTful API development
  • Session management and state persistence
  • Responsive web design
  • Team leadership and project management

Want to learn more? Explore the codebase on GitHub!

Technologies

Platform:

Web

Stack:

HTML, Vanilla CSS, JavaScript, Node.JS, Express.JS, SQLite3, EJS

Website:

N/A