TSWindrush Starter Template

TSWindrush Starter Template

"Kickstart your modern web development journey effortlessly!"

High-performance Next.js Starter Template Accelerate your projects with the power of TypeScript, Tailwind CSS, and Next.js in one seamless setup.

---

---

🚀 TSWindRush is a blazing-fast, developer-friendly starter template combining Next.js, TypeScript, and TailwindCSS for modern web development.

Next JS is the Powerful React Framework for building Web Applications. Together with TypeScript, it provides a great developer experience and a scalable architecture. And with Tailwind CSS, you can create beautiful and responsive web applications.

📚 Table of Contents

• TSWindrush Starter Template
  • 📚 Table of Contents
  • 🎯 Why This Template?
  • Why Choose TSWindRush?
  • ✔️ Prerequisites
  • 🌟 Features
  • 🚀 Live Demo
  • 🛠️ Setup & Installation
  • ⚡ Usage
  • ⚡Usage Scenarios
  • 🔗 Additional Documentation
  • 🛠️ Contribution
  • 🌟 Support
  • Contributors 🌟
  • Join the Conversation 💬
  • 🔗 Connect
  • 🚀 Roadmap
    • Current Planned Features
    • Proposed Features
    • Community Wishlist
  • Code of Conduct 🤝
  • 📄 License

🎯 Why This Template?

This starter template is designed to kickstart your Next.js projects with:

• TypeScript for robust and scalable development.
• TailwindCSS for fast and customizable styling.
• A pre-configured setup for Jest and Playwright for testing.
• A pre-configured ESLint & Prettier to make the code readable.
• Out of the box pre-commit and pre-push hooks using Husky.
• Out-of-the-box GitHub Actions for CI/CD workflows.

Whether you're building a personal project, SaaS platform, or landing page, this template provides all the essentials to get started quickly and efficiently.

Read more here on Why I choose the above Tech Stack

Why Choose TSWindRush?

• 🚀 Blazing Fast Builds: Optimized Next.js configuration for speedy development.
• 🎨 Effortless Styling: Tailwind CSS setup for consistent, scalable design.
• 🛡️ Reliable Codebase: TypeScript ensures type safety for production-ready code.

✔️ Prerequisites

Before you start using Next JS, make sure you have the following prerequisites:

• Node.js and npm installed on your system.
• Basic knowledge of React and JavaScript.
• Basic understanding of HTML, CSS, and JavaScript.
• Basic understanding of TypeScript.
• Basic understanding of Tailwind CSS.

🌟 Features

• ✅ Next.js : The React framework for production.
• ✅ TypeScript : Type safety and better developer experience.
• ✅ TailwindCSS : Utility-first CSS framework for rapid styling.
• ✅ ESLint & Prettier : For clean, consistent code.
• ✅ Jest & Playwright : Testing tools for quality assurance.
• ✅ GitHub Actions : Pre-configured workflows for building, testing, and deploying.

🚀 Live Demo

This starter template is deployed on Vercel. Hee is the Demo:

For Live Demo, Click below link to the deployed app

• Vercel App
• API Route - Hello
• API Route - Version

This project is pre-configured with the deployment on Vercel. For detailed instructions, refer to the DEPLOYMENT.

🛠️ Setup & Installation

Follow these steps to get started:

1. Clone this repository:

   git clone https://github.com/pradeepngupta/nextjs-typescript-tailwindcss.git

2. Navigate to the project directory:

   cd TSWindRush

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser to see the app.

For the detailed instruction, you can refer here.

⚡ Usage

• Fork the Repo: Fork the Github Repo

• Build: Build the project

  npm install
  npm run build
  

• Create Vercel Account: Create your own Vercel Account, and deploy

  vercel login
  vercel
  

• Testing : Run Jest and Playwright tests using

  npm test
  npm run test:e2e
  

• GITHUB Secrets: Define the below secrets in your Github Repo Settings: <VERCEL_PROJECT_ID>, <VERCEL_ORG_ID>, <VERCEL_TOKEN>

• Customization : Modify tailwind.config.js and globals.css to customize your styling.

• TypeScript : Add or edit .ts and .tsx files for your components.

⚡Usage Scenarios

• Kickstarting modern web applications with a pre-configured setup.
• Prototyping UI / UX designs with Tailwind CSS & TypeScript
• Learning or teaching Next.js, TypeScript, and Tailwind CSS in combinations.

🔗 Additional Documentation

For detailed information about various integrations and configurations, refer to the Integration & Configuration Guide.

🛠️ Contribution

🙌 Contributions are welcome! If you'd like to add new features, support additional technologies, or improve this template, here’s how:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Commit your changes:

   git commit -m "Add feature description"

4. Push your changes:

   git push origin feature/your-feature-name

5. Create a pull request.

Check out more for guidelines.

🌟 Support

If you find this project useful:

• 🌟 Star the repository to show your support.
• 📢 Share it with others to spread the word.
• 💬 Have feedback or ideas? Open an issue or create a pull request!

---

Contributors 🌟

Thanks to these amazing people for their contributions: <a href="https://github.com/pradeepngupta/tswindrush/graphs/contributors"> <img src="https://contrib.rocks/image?repo=pradeepngupta/tswindrush" /> </a>

---

Join the Conversation 💬

Have questions, feedback, or feature requests? Join the discussions here: 👉 GitHub Discussions

🔗 Connect

• GitHub Issues: Report bugs or suggest features.
• Contribute: Collaborate to make this template even better.

Let’s build something amazing together! 🚀

---

🚀 Roadmap

Current Planned Features

• Example pages: Landing Page, Dashboard, Error Page, Blog Page.
• Template for create-next-app CLI.
• Organized config files in a config/ folder.
• UI themes: dark, light, system.
• Performance tools: Web Vitals and Lighthouse CI.
• SEO optimization using next-seo.

Proposed Features

• Authentication with NextAuth.js.
• PWA features (offline support, service workers).
• Prebuilt Tailwind components for faster UI development.

Community Wishlist

Help shape the future of TSWindRush! Suggest features or vote on existing ones by opening an issue on GitHub.

Some ideas already proposed:

• Accessibility improvements (a11y).
• Internationalization (i18n) support.
• GraphQL integration with Apollo Client.
• Mock API integration.
• Dockerize the application for containerized deployment.

---

Code of Conduct 🤝

We value a welcoming and inclusive community. Please read our Code of Conduct.

📄 License

This project is licensed under the MIT License.