Contributing & Adding new components

Contributions to NexTemplate are welcome and encouraged! If you have suggestions, feature requests, or you found a bug, feel free to open an issue. If you'd like to contribute code, follow these steps:

1. Fork the repository: Click the "Fork" button in the upper right corner of this repository to create your copy.

2. Clone your fork: Clone your forked repository to your local machine using the following command:

   Copy

   git clone https://github.com/rudrodip/nextemplate

3. Create a branch: Create a new branch for your contribution:

   Copy

   git checkout -b feature-or-fix-name

4. Make changes: Make your changes or additions to the codebase. Ensure your code follows the project's coding guidelines.

5. Test your changes: Run the development server locally to test your changes:

npm run dev
# or
yarn dev
# or
pnpm run dev
# or
bun run dev

6. Commit your changes: Commit your changes with a meaningful commit message:

git add .
git commit -m "Add feature or fix"

7. Push changes: Push your changes to your forked repository:

git push origin feature-or-fix-name

8. Create a Pull Request (PR): Open a Pull Request on GitHub against the dev branch. Provide a clear title and description of your changes. Make sure to target the dev branch, not the main branch.

9. Review and Merge: Maintainers will review your contribution. Once approved, your changes will be merged into the main branch.

Adding a New Component

If you'd like to contribute a new component to NexTemplate, please follow these guidelines:

1. Component Location: Place the new component in the src/components/templates/<component_folder> directory.

2. Mandatory Files: Each component folder must include the following two files:

   • component-details.json: Contains metadata about the component.
   • main.tsx: Should export the component as the default export.

3. Component Details Metadata:

   • The component-details.json file must export an object of type ComponentDetails.
   • Example of ComponentDetails type:
     Copy

     export type ComponentDetails = {
       title: string;
       desc: string;
       tags: string[];
       published: boolean;
       date: string; // Format: "2024-01-12T17:20:00.000Z"
     };

   • Ensure that the date string follows the specified JavaScript format.

4. File Structure: There can be multiple files within the component folder, but subdirectories are not allowed.

Deployment

To deploy NexTemplate, you can use your preferred hosting platform. Here's a general guide:

1. Build your app:

npm run build
# or
yarn build
# or
pnpm run build
# or
bun run build

2. Deploy to your platform of choice:

   • If using Vercel, connect your GitHub repository, and Vercel will handle the deployment seamlessly.
   • For other platforms, upload the contents of the out/ directory generated after the build to your server.

3. Visit your deployed site: Open your browser and visit your deployed site to ensure everything is working as expected.

Support

If you encounter any issues, have questions, or just want to chat, knock me on Discord / Twitter or open an issue on GitHub. Your feedback is valuable, and we appreciate your contribution!

Thank you for being a part of the NexTemplate community!