https://github.com/jmgogo/thoughts-react
This project leverages the React Framework ⚛️ to create a dynamic front-end for an app to detail your passing thoughts! 🧠
https://github.com/jmgogo/thoughts-react
create-react-app css devcontainer docker docker-compose html javascript js react react-components react-hooks reactjs
Last synced: 3 months ago
JSON representation
This project leverages the React Framework ⚛️ to create a dynamic front-end for an app to detail your passing thoughts! 🧠
- Host: GitHub
- URL: https://github.com/jmgogo/thoughts-react
- Owner: jmgogo
- License: mit
- Created: 2024-03-12T12:55:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T16:11:20.000Z (over 2 years ago)
- Last Synced: 2025-02-16T02:41:20.418Z (over 1 year ago)
- Topics: create-react-app, css, devcontainer, docker, docker-compose, html, javascript, js, react, react-components, react-hooks, reactjs
- Language: JavaScript
- Homepage: https://mypassingthoughts.netlify.app/
- Size: 2.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Passing Thoughts in React ⚛️
Foreword
A React webapp to capture your passing thoughts.... 🧠💡
Report Bug
·
Request Feature
## Table of Contents
- [Passing Thoughts in React ⚛️](#passing-thoughts-in-react-️)
- [Table of Contents](#table-of-contents)
- [Setup](#setup)
- [About](#about)
- [Prerequisites](#prerequisites)
- [Docker](#docker)
- [Visual Studio Code](#visual-studio-code)
- [Getting started](#getting-started)
- [License](#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](.devcontainer) is built IAW the [DevContainers specification](https://containers.dev/implementors/spec/) 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](https://github.com/jgome284/thoughts-react) 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](https://www.docker.com/products/docker-desktop/) which includes both Docker Engine and Docker Compose. (Recommended ⭐)
- Install [Docker Engine](https://docs.docker.com/engine/install/binaries/) and [Docker Compose](https://docs.docker.com/compose/install/standalone/) 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](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) 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`](./thoughts/) directory and install project dependencies via npm by executing the following command. If successful, a `node_modules` folder should appear in your directory.
```sh
npm install
```
Our `package.json` has many useful scripts aliased via npm. To run the development version of the webapp run the following command.
```sh
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`](./thoughts/build/) folder for the webapp.
```sh
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](http://localhost:3000) ... Make use of the webapp to add fleeting thoughts that warm your merry heart! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ❤️!
```sh
serve -s thoughts/build
```
Web App Demo
## License
Distributed under the MIT License. See `LICENSE` for more information.