Passing Thoughts in React ⚛️

Foreword

A React webapp to capture your passing thoughts.... 🧠💡
Report Bug · Request Feature

Table of Contents

• Passing Thoughts in React ⚛️
  • Table of Contents
  • Setup
  • About
  • Prerequisites
    • Docker
    • Visual Studio Code
  • Getting started
  • License

Setup

This project includes a Dev Container for Visual Studio Code. It serves as a full-featured development environment with everything needed to run Node. Dev Containers separate tools, libraries, or runtimes needed for working with a codebase. They aid in continuous integration and testing. Dev containers can be run locally or remotely, in a private or public cloud, in a variety of supporting tools and editors.

This DevContainer is built IAW the DevContainers specification and tailored for a development environment that runs Debian GNU/Linux 12 (bookworm). JavaScript dependencies are versioned in accordance with package-lock.json and project configurations are detailed in package.json. The devcontainer also has git for version control and several extensions installed for Visual Studio Code as IDE utilities.

About

This project leverages React for the front-end of a webapp. The app captures user input to display passing thoughts. React is a widely adopted JavaScript framework that is used to build user interfaces. With React, we create reusable components that rerender when changes for them are captured by the Virtual DOM.

Prerequisites

Docker

To start, you need to have Docker Engine and Docker Compose on your machine. You can either:

• Install Docker Desktop which includes both Docker Engine and Docker Compose. (Recommended ⭐)
• Install Docker Engine and Docker Compose as standalone binaries. (If it suits your fancy 🤵)

Visual Studio Code

This devcontainer is setup for development on Visual Studio Code. You should have it installed along with the remote development pack to enable the IDE's DevContainers functionality.

Getting started

To start, open VS Code in a directory of your choice. With the terminal, clone this repository via git clone https://github.com/jgome284/thoughts-react.

Open Docker Desktop to run the Docker daemon, a background process that manages and coordinates Docker containers on your system. On VS Code, open your local copy of the project and start the development container by running Dev Containers: Rebuild and Reopen In Container in the command palette. It can be accessed with the keyboard shortcut ctrl + shift + P on your keyboard.

When the Dev Container launches, cd to the thoughts directory and install project dependencies via npm by executing the following command. If successful, a node_modules folder should appear in your directory.

npm install

Our package.json has many useful scripts aliased via npm. To run the development version of the webapp run the following command.

npm start

If you make changes you can package a new production build of the application via the following command. If successful, you should see updated files in the build folder for the webapp.

npm run build

You can deploy the production build of the webapp on your local machine via the serve command detailed below. Then, open the webapp on localhost:3000 ... Make use of the webapp to add fleeting thoughts that warm your merry heart! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ❤️!

serve -s thoughts/build

Web App Demo

License

Distributed under the MIT License. See LICENSE for more information.