https://github.com/pinkysamantaray/remix-demo

A demo Login Portal built with Remix and React, Hero UI(tailwind)
https://github.com/pinkysamantaray/remix-demo

heroui react remix tailwindcss webappdevelopment

Last synced: 8 months ago
JSON representation

A demo Login Portal built with Remix and React, Hero UI(tailwind)

• Host: GitHub
• URL: https://github.com/pinkysamantaray/remix-demo
• Owner: pinkysamantaray
• Created: 2025-02-17T14:01:37.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-02-17T14:12:25.000Z (8 months ago)
• Last Synced: 2025-02-17T15:24:43.095Z (8 months ago)
• Topics: heroui, react, remix, tailwindcss, webappdevelopment
• Language: TypeScript
• Homepage:
• Size: 216 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Welcome to Remix!

## Remix Demo App

In this project, we’ll build a scalable web application using Remix. We’ll learn about routing, server-side rendering (SSR), API integration, and managing data effectively with modern best practices.

- 📖 [Remix docs](https://remix.run/docs)

## 🚀 Key Takeaways

- Introduction to Remix and its benefits

- Setting up a Remix development environment

- Creating a scalable project structure

- File-based routing including dynamic routes like `/profile/:id` and nested layouts for reusable components

- Working with `loader` functions for fetching data on the server and `action` functions for handling form submissions and mutations.

- Using Tailwind CSS for responsive design

  This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

- Integrating algorithms and data structure concepts into a real-world app

---

## 📂 Project Structure

Here’s the folder structure we use in this project:

```

app/

├── routes/

│ ├── index.tsx // Home route

│ ├── about.tsx // Static About page

│ ├── profile.$id.tsx // Dynamic profile route

│ └── api/ // API-related routes

├── components/ // Reusable components

├── styles/ // Tailwind CSS files

├── utils/ // Utility functions

├── root.tsx // Application root layout

└── entry.client.tsx // Client-side entry point

```

---

## 🛠️ Setting Up the Project

### Prerequisites

Make sure you have the following installed:

- **Node.js** (v16 or later)

- **npm** or **yarn**

### Installation Steps

1. Install dependencies:

   ```bash

   npm install

   ```

2. Start the development server:

   ```bash

   npm run dev

   ```

3. Open the browser and navigate to `http://localhost:5173`.

### Deployment

First, build your app for production:

```sh

npm run build

```

- `build/server`

- `build/client`

Then run the app in production mode:

```sh

npm start

```

Open the browser and navigate to `http://localhost:3000`.

Now you'll need to pick a host to deploy it to.

---

## 📜 License

This project is open-source under the [MIT License](LICENSE).

---

## 🔗 Additional Resources

- **[Remix Documentation](https://remix.run/docs)**: Official Remix documentation

- **[Tailwind CSS](https://tailwindcss.com/)**: Styling framework used in this project

- How Remix work? ¯\_(ツ)\_/¯

  ![Remix Components Flow](https://github.com/pinkysamantaray/remix-demo/blob/main/public/remix-components-flow.png)

  ![Remix Data Flow](https://github.com/pinkysamantaray/remix-demo/blob/main/public/remix-data-flow.png)