WebRoll
A place to submit and discover creations on the internet.
Overview:
WebRoll.io is a website that allows users to submit and discover commendable creations on the internet. Users can submit websites, which are then reviewed by moderators and added to the database of approved sites. Users can discover new sites by pressing the "Next" button on the explore page, with the ability to narrow down the scope by selecting from preset categories. They can also save sites by liking them and report any issues with categories, tags, or broken websites.
Features:
- Website Submission: Users can submit websites for others to discover.
- Categorization and Tagging: Users can select from predefined categories and freely enter tags to properly catalogue the site.
- Moderator Review: Submitted sites are reviewed by moderators before being added to the database of approved sites.
- Random Site Discovery: Users can discover random sites from the approved database by pressing the "Next" button on the explore page.
- Category Filtering: Users can narrow down the websites shown by selecting from preset categories.
- Saving Sites: Users can save sites by leaving a like.
- Reporting Issues: Users can report miss-labeled categories, tags, or broken websites.
- Site Information: Each submitted site has a unique page in the /sites directory with information such as views and likes.
Summary:
WebRoll.io is a platform where users can submit and discover commendable creations on the internet. It allows users to submit websites, which are then reviewed by moderators and added to a database for discovery. Users can explore random sites, filter by categories, save sites, and report any issues. The website is built with Astro and React with Typescript, styled with DaisyUI and TailwindCSS. The MySQL database is queried and managed with Prisma, and Rate-limiting is handled with an Upstash Redis cache. Overall, WebRoll.io provides an easy and organized way for users to discover new and interesting websites.
- Astro
Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- daisyUI
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Prisma
Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.
- Fullstack
A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.