Deployment of the Project

Deploy the React Countdown Timer on Netlify

Once the app works locally, we deploy it so it’s live on the web.

Upload Files to a GitHub Repository

First, initialize a local Git repository for your project (if you haven’t already) and push the code to GitHub. For example:

git init

git add .

git commit -m "Initial countdown timer project"

git branch -M main

git remote add origin https://github.com/YourUsername/countdown-timer.git

git push -u origin main

Replace YourUsername and the repo name as needed. After this, your code is on GitHub.

GitHub Link: Countdown Timer App

Deploy

Now deploy to Netlify:

  • Create a Netlify account (if you don’t have one) and login.
  • New Site from Git: In Netlify, choose to link a new site from GitHub. Authorize Netlify to access your repos. Select the countdown-timer repository. Netlify should automatically detect it as a React app (created with Create React App) and set the build command to npm run build and the publish directory to build.
  • Build Settings: Keep the defaults (build command: npm run build, publish directory: build). If needed, Netlify’s docs suggest these settings for CRA.
  • Deploy: Netlify will pull your code and run npm run build. Once the build is ready, Netlify deploys the app to a live URL (it may generate a random subdomain, or you can set a custom name). If everything is set up, your React app is now live on Netlify.
  • Continuous Deploy: Whenever you push new commits to GitHub (the main branch), Netlify will auto-deploy the latest version.

After deployment, Netlify will provide a URL for your project, e.g. https://your-site-name.netlify.app. Make sure to test it: open that link and verify the countdown timer works in the live environment.