Skip to content

Ajay84sia/NTWIST-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Clone ntwist.com Homepage in React.js.

This project involves creating a clone of the ntwist.com homepage using vite + React.js and Chakra UI. Follow these steps to get started:

Deployed Link   Github Link

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js and npm: You can download and install them from nodejs.org.

Installation

  1. Clone this repository to your local machine:
git clone https://github.com/Ajay84sia/NTWIST-Clone.git

cd NTWIST-Clone
  1. Clone this repository to your local machine:
npm install

Development

  1. Start the development server:
npm run dev

  1. Open your browser and navigate to http://127.0.0.1:5173/ to see the development version of the ntwist.com homepage. You can now begin making changes to the code.

Deployment to Netlify

  1. Create a Netlify account if you don't have one: Netlify Sign-Up.

  2. Install the Netlify CLI (Command Line Interface) globally:

npm install -g netlify-cli

  1. Log in to your Netlify account:
netlify login

  1. Build your React app for production:
npm run build

  1. Deploy your app to Netlify:
netlify deploy

Follow the prompts in the terminal to set up the deployment, including selecting a site name, build command, and publishing directory. The build command should be npm run build, and the publish directory should be built.

  1. Once the deployment is complete, your app will be accessible through a Netlify URL (e.g., https://your-site-name.netlify.app). You can configure custom domains and other settings in the Netlify dashboard.

Customization

You can customize the clone by editing the React components and styles in the src directory. Make sure to test your changes locally using npm start before deploying to Netlify.

Additional Resources

Output (Large Screen):

Header -

image

Homepage -

image

Footer -

image

Output (Small Screen):

Header -

image

Homepage -

image

Footer -

image

Happy coding! Feel free to reach out if you have any questions or need further assistance.