Giter Club home page Giter Club logo

todo-app's Introduction

To-Do App

This is a sample to-do application for use in the PXL containers course.

Tech Stack

The stack represents a combination of a JavaScript-based backend (Node.js with Express), a modern frontend framework (React), database technologies (SQLite and MySQL), and containerization (Docker), making it a comprehensive example for full-stack development and deployment.

The technology stack includes:

  • Node.js: The backend application is built using Node.js, a JavaScript runtime environment that executes JavaScript code outside a web browser.

  • Express.js: This is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is used to create the server and handle HTTP requests.

  • React.js: The frontend is built using React, a JavaScript library for building user interfaces. It is used to create the interactive UI components for the application.

  • SQLite: This is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine. SQLite is used as one of the database options for the application.

  • MySQL: This is a popular open-source relational database management system. In this application, MySQL is used as an alternative database option to SQLite.

  • Docker: The application is designed to be containerized using Docker, which allows for isolating the application in containers to simplify deployment and scalability.

  • Bootstrap & Font Awesome: For styling, the application uses Bootstrap, a front-end framework for developing responsive and mobile-first websites, and Font Awesome for icons.

  • Jest: This is a JavaScript testing framework used for writing tests for the application.

  • Prettier & ESLint: These are code formatting and linting tools to ensure code quality and consistency.

Components

  • package.json: Defines the Node.js application's dependencies, scripts, and other configuration details.
  • src/index.js: The main entry point for the Node.js application. It sets up an Express server, initializes database connections, and defines routes for CRUD operations on 'todo' items.
  • Persistence Layer (src/persistence):
    • index.js: Determines whether to use MySQL or SQLite based on the environment configuration.
    • mysql.js & sqlite.js: Implement database operations for MySQL and SQLite, respectively.
  • Routes (src/routes): Contains Express route handlers for adding, deleting, retrieving, and updating 'todo' items.
  • Frontend (src/static):
    • index.html: The main HTML file for the frontend.
    • app.js: A React-based frontend script that interacts with the backend to display and manage 'todo' items.

This application serves as a practical example for Docker users to understand how to containerize a simple web application using Docker.

Persistence Layer

Current Implementation in index.js

The index.js file in the src/persistence directory currently checks for the presence of a MySQL configuration in the environment variables. If MySQL-related environment variables are set, it uses MySQL; otherwise, it defaults to SQLite. The relevant code is:

if (process.env.MYSQL_HOST) module.exports = require('./mysql');
else module.exports = require('./sqlite');

Adaptations You Might Need

  1. Environment Variables: Ensure that the environment variables for MySQL (like MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD, etc.) are correctly set in your deployment environment when you want to use MySQL. If these variables are not set, the application will default to using SQLite.

  2. Database Configuration Files: The mysql.js and sqlite.js files contain the specific configurations and initialization code for each database.

By adapting these aspects of the index.js file and related configurations, you can control which database the application uses based on your deployment environment or other conditions.

todo-app's People

Contributors

dhoubrechts avatar tomcoolpxl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.