A simple React-based web application published as a sample deployment project for [Nife.io][1].
This repository demonstrates how to run a lightweight React application locally, package it with Docker, and deploy it on [Nife.io][1]. It is intended as a practical sample for validating frontend deployment workflows, container-based delivery, and modern UI applications.[1][2]
This project is a clone of the popular Wordle game built using React, TypeScript, and Tailwind CSS. It demonstrates modern frontend development practices, state management, and interactive UI design.[3]
If you want a simple frontend project to test deployment on [Nife.io][1], this repository is a good starting point.
| Feature | Description |
|---|---|
| Word guessing game | Interactive Wordle-style gameplay |
| Modern UI | Built with React and Tailwind CSS |
| Type safety | Uses TypeScript |
| Responsive design | Works across devices |
| Deployment-ready setup | Supports Docker and Nife.io deployment |
| Technology | Purpose |
|---|---|
| React | Frontend framework |
| TypeScript | Type safety |
| Tailwind CSS | Styling |
| Node.js | Runtime environment |
| Docker | Container packaging |
| Nife.io | Deployment platform |
Before running the project locally, make sure the following are installed.
| Requirement | Notes |
|---|---|
| Node.js | Installed and configured |
| npm | Comes with Node.js |
| Git | Required to clone repository |
git clone https://github.com/cwackerfuss/react-wordle.git
cd react-wordlenpm installnpm run startThen open the application at http://localhost:3000.
This project includes a Dockerfile for container-based execution.
docker build -t react-wordle .docker run -p 3000:3000 react-wordleAfter the container starts, open the app at http://localhost:3000.
You can deploy this application on [Nife.io][1] using either a Docker image, the source repository, or the CLI.[1][2]
First, build and push the image to your preferred container registry.
docker build -t react-wordle .
docker tag react-wordle <username>/react-wordle:latest
docker push <username>/react-wordle:latestThen configure a new application in Nife.io with the following settings.
| Setting | Value |
|---|---|
| Source | Docker Image |
| Registry | Docker Hub or another supported registry |
| Image | <username>/react-wordle:latest |
| Internal Port | 3000 |
| External Port | 80 |
| Suggested Replicas | 1 |
You can also deploy the project directly from GitHub.
| Setting | Value |
|---|---|
| Source | Git Repository |
| Provider | GitHub |
| Branch | main |
| Internal Port | 3000 |
| External Port | 80 |
| Build Mode | Auto-Dockerize with runtime |
If you prefer the command line, use the following workflow.
nifectl auth login
nifectl init
nifectl deployFor step-by-step instructions, see the [Nife.io Quick Deploy documentation][2] and the [nifectl quick start guide][4].
The following variables are commonly relevant for deployment.
| Variable | Description | Example |
|---|---|---|
| NODE_ENV | Application environment | production |
| Path | Purpose |
|---|---|
src/ |
Application source code |
public/ |
Static assets |
Dockerfile |
Container build instructions |
package.json |
Project dependencies |
tsconfig.json |
TypeScript configuration |
| Issue | Suggested fix |
|---|---|
| Port already in use | Change port or stop process |
| Dependencies not installed | Run npm install |
| App not starting | Check logs and configuration |
| Docker build fails | Verify Dockerfile |
| Deployment fails on Nife.io | Check ports and configuration |
| App not accessible | Verify routing and logs |
This repository is maintained by Nifetency as a sample deployment project for Nife.io.
If this repository is derived from an earlier template or upstream example, it is good practice to retain visible credit to the original author or source repository.
This project is licensed under the MIT License.