Remix Template Starter

Remix Template Starter is designed to streamline your development process, enabling you to quickly launch highly effective web applications using the Remix full-stack framework. This template is a curated blend of application structures, dynamic UI components, and best practices in software engineering and web development workflows. It includes a range of functionality hooks, utilities, and seamless integration with key third-party services.

Powered by the following technologies:

Frontend:

Backend:

Others:

What is this template for

This template serves as a starting point for building your own application. You can customize and expand upon the existing components and features to fit your specific needs. It provides a foundation that you can build on top of, saving you time and effort in setting up the initial structure and common functionalities.

It's a collection of reusable components that you can copy and paste into your own projects. This approach gives you complete control over the code and allows you to modify and adapt the components to your specific requirements.

To use this template effectively, follow these steps:

1. Explore: Take some time to explore the template and understand its structure, components, and features. Familiarize yourself with the existing code and how it is organized.
2. Pick and Choose: Identify the components that are relevant to your project. Not every component may be necessary for your specific application. Select the ones that align with your needs.
3. Copy and Paste: Once you have identified the components you want to use, copy the corresponding code from the template and paste it into your own project. You can then customize and modify the code to match your application's design and functionality.
4. Customize and Expand: After integrating the components into your project, customize them to fit your specific requirements. Modify the styling, add additional features, or extend the functionality as needed. The code is now yours to adapt and build upon.
5. Use as a Reference: Even if you don't directly copy and paste the components, you can still use this template as a reference for building your own application. Study how the components are structured, how they interact with each other, and how common functionalities are implemented. Use this knowledge to create your own components and features.

Remember, this template is a starting kit, not a blank repository generator. It provides a foundation, but it's up to you to customize and shape it based on your actual application needs. Take the time to explore, understand, rename, and replace the contents as you build your application.

By leveraging the reusable components and following the provided structure, you can kickstart your development process and focus on implementing the unique aspects of your application. Feel free to modify, extend, and adapt the template to create a codebase that perfectly suits your project requirements.

This template can be used as a starting point, and be built on top of on, but can also be used to take the reusable components from this project, refer to the components to see what can be taken and used in your own project.

Live Preview

A live preview with the project deployed can be viewed here, it might take a while for the website to first load due to the VM sleeping (it only wakes up when someone is accessing the site, and sleeps after 10 minutes of inactivity).

You can either register a new account, log in with GitHub or log in using the following account:

Email:

test@test.com

Password:

test12345

Take into account that adding a new product, editing an existing product and deleting products won't work. The APIs are protected by ensuring that only users with the Administrator role can modify them. If you enjoy the preview, then refer to the Getting Started section to get the project up and running on your own machine.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Before installing, ensure you have the following:

• Node.js (version >=18.0.0 required)
• npm or yarn installed

Installation

You can choose from the following 2 options:

1. Clone the repository or set up using npx

Use the following command to clone the repository:

git clone https://github.com/aliabudal/Remix-Template-Starter.git

Use the following command to install using npx:

npx create-remix@latest --template aliabudal/Remix-Template-Starter

After cloning the repository or setting up the project using npx

2. Install the dependencies

Use the following command if you are using npm:

npm install

Use the following command if you are using yarn:

yarn install

3. Set up the environment variables

Refer to the env-example.md file for the required environment variables. You need to create a .env file in the root directory of your project and add the variables mentioned there with the appropiate values. Make sure to replace the empty quotes with the actual values corresponding to your setup. The project by default uses Turso for the database, if you want to use a different provider, you will have to modify the server and drizzle.config.ts with your desired config. The project also has GitHub OAuth 2.0 implemented, if you do not wish to use it, you don't have to fill in the clientID and clientSecret in the .env file.

After setting up the environment variables, you are ready to proceed with either development or production.

Development

For development purposes, you can use the following commands to start the project:

Use the following command if you are using npm:

npm run dev

Use the following command if you are using yarn:

yarn dev

Now your project should be up and running, and you can access it in your browser at localhost:3000.

Production

When you are ready to deploy your project to a production environment, follow these steps:

Use the following command if you are using npm:

npm run build

Use the following command if you are using yarn:

yarn build

Then you can run the following commands to run the app in production mode:

Use the following command if you are using npm:

npm start

Use the following command if you are using yarn:

yarn start

For production deployment, the project also includes a Dockerfile. The Dockerfile provides instructions to build a containerized version of your application.

Features

The Remix Template Starter comes with a set of pre-built components and features to help you quickly develop your application. It also comes with route protection via a parent route that acts as a wrapper around the other routes, ensuring that no unauthorized access is allowed to those routes. Linting and formatting with Prettier and ESLint, hosting and auto-deployment with Fly.io and GitHub, refer to this section.

Components

UI Components:

The ui/ directory contains a collection of reusable UI components that are taken from either shadcn/ui or Aceternity UI. These components provide a consistent and stylish look and feel to your application. Some of the components may have undergone small modifications to fit the specific needs of this template.

The UI components include:

1. accordion.tsx: An expandable content component
2. badge.tsx: A small badge component for displaying status or notifications
3. button.tsx: Customizable button component
4. card-hover-effect.tsx: A card component with hover effects
5. card.tsx: A basic card component for displaying content
6. dropdown-menu.tsx: A dropdown menu component
7. input.tsx: An input field component
8. label.tsx: A label component for form fields
9. pagination.tsx: A pagination component for navigating through pages
10. radio-group.tsx: A radio button group component for selecting options
11. select.tsx: A dropdown select component
12. tabs.tsx: A tab navigation component
13. marquee.tsx: Marquee that will display cards and is infinitely animated

Other Components:

The components located outside the ui/ directory are built using the logic and styling from the UI components, along with additional functionality and design specific to their purpose.

These components include:

1. faq.tsx: A component for rendering frequently asked questions
2. footer.tsx: The footer component of the application
3. global-pending-indicator.tsx: A component for displaying a loading indicator
4. header.tsx: The header component of the application
5. hero-section: A directory containing components for the hero section
6. how-it-works.tsx: A component explaining how the application works
7. icons.tsx: A collection of icon components
8. payment.tsx: A component for handling payment functionality
9. plans.tsx: A component for displaying available plans or pricing options
10. theme-switcher.tsx: A component for switching between light and dark themes
11. used-by-clients.tsx: A component showcasing the clients or companies using the application
12. sponsors: A marquee that is infinitely animated and can show cards containing whatever you want

These components are designed to work together seamlessly, providing a cohesive and functional user interface for your application.

Authentication

The template utilizes remix-auth and remix-auth-github for handling authentication. It provides support for both form-based authentication and GitHub OAuth 2.0 authentication. The latter can be extended to any other provider that you want (Google, Twitter, Microsoft OAuth 2.0 etc.), you will simply have to extend the following file, and use the appropiate callback, refer to the following GitHub repo for more details.

Protected routes

All essential routes are protected using the _shell route, this route acts as a parent route that wraps all the other routes in the application. It ensures that only authenticated users can access the protected routes. It also makes it so that the authentification is handled only 1 time throughout the entire application. The following image represents a representation of the routes:

Ensure that you define the directory inside the routes/ using the _shell syntax if you wish the route to be protected.

Nice to have (optional)

This section explains some optional but beneficial features that are included in the template. You can easily remove them if you do not wish to use them.

Linting and Formatting

The template comes with ESLint and Prettier configured for linting and formatting your code, with the appropiate plugins for them (TailwindCSS, React etc).

Run the following command to format the entire project:

npm run format

Run the following command lint the entire project:

npm run lint

View all other commands or modify the existing commands in package.json.

GitHub Actions Workflow

The template includes a GitHub Actions workflow configuration file that automatically checks for linting and formatting errors on pull requests and pushes to the master branch. It also deploys your application to Fly.io when changes are pushed to the master branch.

The workflow consists of two jobs:

1. build: Runs on every pull request and push to the master branch. It checks out the code, sets up Node.js, installs dependencies, and runs ESLint and Prettier to check for linting and formatting errors.

2. deploy: Runs only on pushes to the master branch, after the build job has completed successfully. It checks out the code, installs the Flyctl CLI, and deploys the application to Fly.io using the provided FLY_API_TOKEN secret.

If you want to remove either of those jobs, you can remove the job from the workflow configuration file at .github/workflows/workflows.yaml.

Important: Make sure to set up the FLY_API_TOKEN secret in your GitHub repository's settings to enable automatic deployment to Fly.io.

These optional features help maintain code quality, consistency, and automated deployment, enhancing your development workflow.