nvsmith/color-box

A swatch app that makes use of the colornames API, i.e. when React inputs meet CSS styles.

NEW README Tecnate | Last Updated: 2024.05.29

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

This is a color swatch app built with React that implements:

• Functional components
• Click events
• useState & useEffect hooks
• Lists & keys
• Props & prop drilling
• Controlled component inputs
• APIs

Type in any valid color name or select from the list in the sidebar to view swatches, imported from the colornames API. Compare light vs dark themes to view what text looks like against your chosen background.

(back to top)

Built With

• HTML
• CSS
• React.js
  • Create React App
• Node.js
• colornames API

(back to top)

Getting Started

Click here to view the current version of this app in your browser.

Prerequisites

All dependencies will need to be built from the package.json file to modify code and run this app locally. You will need to have installed:

• A text editor
• Node.js
  • Node Package Manager (npm)

Installation

1. Clone this repo.
2. In your project root, you will need to install this project's dependencies by executing npm install in the terminal.
   • This will read the package.json file and create the node_modules folder with all the necessary packages and dependencies.
3. Once installation is finished, you can launch the app in your browser by executing npm run start.
   • Keep this terminal instance running in the background during development.
   • You can end this terminal session with Ctrl+C.
4. Open a separate terminal instance for any other development/version control needs.

Usage

• src/App.js: Container component: structure & business logic.
• src/components: Presentational components: UI rendering.
• src/index.css: design and aesthetics.

(back to top)

Roadmap

There are no plans to develop additional features at this time.

(back to top)

License

Distributed under the MIT License.

(back to top)

Contact

Nate: Website | GitHub | Grepper

(back to top)

Acknowledgments

Dave Gray - React JS Full Course for Beginners

• Chapters 1-10

README Template

• Best README Template

(back to top)