MetaStack is a modern, production-ready starter template for building web applications. It combines popular technologies like MongoDB, ExpressJS, TailwindCSS, and AlpineJS to provide a seamless development experience. Whether you're building a simple website or a complex web app, this boilerplate has you covered.

• Responsive Design: Built with mobile-first principles for a seamless experience across devices.
• Modern Tooling: Pre-configured with TailwindCSS and AlpineJS via CDN for quick setup.
• Mobile Friendly: Optimized for mobile devices to ensure a great user experience on any screen size.
• API Ready: Easily integrate with external APIs to extend the functionality of your application.
• No CORS Issues: No need for CORS configuration.
• Simple HTML: Clean HTML structure with AlpineJS for reactivity and TailwindCSS for styling.
• Easy Backend: Simplified backend setup with ExpressJS for quick development.

Follow these steps to set up and run the project locally.

• Node.js: Ensure you have Node.js installed. Download it from the official website.
• MongoDB Atlas Account: Create a free account on MongoDB Atlas.

1. Use this command to initiate a new project using the template.

npx degit anas1412/MetaStack my-new-project

1. Navigate to the project directory.

cd my-new-project

1. Install the required dependencies using npm.

npm install

1. Copy .env.example and name it .env file in the root directory and add your MongoDB connection string.

cp .env.example .env
echo "MONGODB_URI=your-mongodb-connection-string" >> .env

1. Start the development server using the provided npm script.

npm run dev

1. Open your browser and visit the localhost URL to view the project.

http://localhost:5000

• Frontend: TailwindCSS, AlpineJS
• Backend: ExpressJS, MongoDB
• Other Tools: Node.js, NPM

You can customize TailwindCSS by editing public/js/tailwind-config.js, you can also add vanilla css in public/css/styles.css.

Refer to the official TailwindCSS documentation for more details.

To add new routes, create a new file in the routes directory and import it into the main application file.

The project includes custom animations using TailwindCSS and AlpineJS. You can modify or add new animations in the custom CSS file.

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes with a descriptive message.
4. Push your changes to the branch.
5. Open a pull request with a detailed description of your changes.

This project is licensed under the MIT License. See the LICENSE file for details.

• TailwindCSS: For the amazing utility-first CSS framework.
• AlpineJS: For the lightweight and powerful JavaScript framework.
• MongoDB Atlas: For providing a free cloud-based database solution.
• ExpressJS: For the minimalist web framework.

If you have any questions or need help, feel free to open an issue or contact me directly.

Enjoy building with MetaStack! 🚀