Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashot72/remix-online-store
Online Store based on Remix which is a brand-new full stack web framework
https://github.com/ashot72/remix-online-store
mongodb nodejs online-store prisma react remix ssr
Last synced: about 4 hours ago
JSON representation
Online Store based on Remix which is a brand-new full stack web framework
- Host: GitHub
- URL: https://github.com/ashot72/remix-online-store
- Owner: Ashot72
- Created: 2022-12-12T08:29:36.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T10:24:31.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T12:28:22.344Z (over 1 year ago)
- Topics: mongodb, nodejs, online-store, prisma, react, remix, ssr
- Language: JavaScript
- Homepage:
- Size: 10.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Remix Online Store
[Remix](https://remix.run/) is a brand-new full stack web framework. It is used for server-side rendering (SSR). Unlike vanilla React, where data is fetched on the frontend and then rendered on the screen, Remix fetches data on the backend and serves the HTML directly to the user. It was created by the people behind [React Router](https://reactrouter.com/en/main).
In the Remix Online Store app I tried to use some Remix features that makes the app development easier - different Remix hooks (useLoaderData, useAtionData, useFetcher, useMatches, useTransition, useCatch, useNavigate), different routes (layout, dynamic, dot-delimited, pathless, resource etc.), error handling (ErrorBoundary, CatchBoundary) and links, meta, action, loader, headers exported functions. I also use Remix prefetch to fetch data ahead of time. I disable JavaScript on pages where we have static content to avoid unnecessary downloads.
[Prisma](https://www.prisma.io/), a next-generation ORM is used in our application to work with MongoDB. The app uses session cookies for authentication.
```
# Clone the repository
git clone https://github.com/Ashot72/Remix-Online-Store.git
cd Remix-Online-Store
# Install dependencies
npm install
# Start the app in development mode
npm run dev
# Add MongoDB connection string
Add MongoDB connection string in .env file (DATABASE_URL)
# Stripe Card Information for testing
Card Number: 4242 4242 4242 4242
CVC: 567
Expiration Date: 12/34
```
Go to Remix Online Store [Video](https://youtu.be/K56f1Z1Ha7c) page
Go to Remix Online Store [Description](https://ashot72.github.io/Remix-Online-Store/doc.html) page