Veltrends

screenshot of Veltrends
react
remix
prisma

Veltrends is a website website where users can explore trending tech news.

Overview

Veltrends is a website that provides users with trending tech news. It is built using a tech stack that includes React, TypeScript, Remix, Styled Components, Tanstack Query, Sangte on the frontend, and Node.js, TypeScript, Fastify, Prisma, PostgreSQL, Swagger, Typebox, and Algolia on the backend. The infrastructure is managed using Terraform on AWS.

Features

  • Explore Tech News: Users can seamlessly explore trending tech news on the Veltrends website.
  • React-Based UI: The frontend of Veltrends is built using React, a popular JavaScript library for building user interfaces.
  • TypeScript Support: Both the frontend and backend of Veltrends are written in TypeScript, providing the benefits of static typing and enhanced development experience.
  • Prisma as Database Toolkit: Veltrends uses Prisma, a modern database toolkit, to simplify database management and provide data access in a type-safe manner.
  • Swagger API Documentation: API documentation for Veltrends is available through Swagger, making it easy for developers to understand and interact with the backend API.
  • Search with Algolia: Veltrends integrates with Algolia to provide fast and powerful search functionality for tech news articles.
  • Easy Deployment with Terraform: The infrastructure of Veltrends is managed using Terraform, allowing for easy deployment and scalability on AWS.

Backend

  1. Rename the file .env.sample to .env in the packages/veltrends-server directory.
  2. Modify the datasource db section in packages/veltrends-server/prisma/schema.client to use SQLite as follows:
    datasource db {
      provider = "sqlite"
      url      = "file:./dev.db"
    }
    
    If you want to use PostgreSQL instead of SQLite, follow these additional steps:
    • Run a PostgreSQL server using the provided link.
    • Set the DATABASE_URL in the .env file.
    • Modify the datasource db section in schema.prisma as follows:
      datasource db {
        provider = "postgresql"
        url      = env("DATABASE_URL")
      }
      
  3. Delete the packages/veltrends-server/prisma/migrations directory.
  4. Run the command yarn install to install the required dependencies.
  5. Run the command yarn prisma migrate dev to initialize the database.
  6. Run the command yarn prisma generate to generate the Prisma Client.
  7. Run the command yarn dev to start the server. The server will run on port 8080. Visit http://localhost:8080/ to check if the server is running.
  8. The API documentation can be accessed at http://localhost:8080/documentation.

Frontend

  1. The frontend project uses pnpm to install the required dependencies.
  2. Rename the file .env.sample to .env in the packages/veltrends-client directory.
  3. Run the command pnpm install to install the required dependencies.
  4. Run the command pnpm dev to start the server. The server will run on port 8788. Visit http://localhost:3000/ to check if the server is running.

Summary

Veltrends is a website that enables users to explore trending tech news. It features a React-based frontend, TypeScript on both the frontend and backend, and various technologies like Prisma, Swagger, and Algolia. The installation process involves configuring the backend with either SQLite or PostgreSQL and running specific commands to initialize the database and start the server. The frontend can be run using pnpm and accessed on a different port. With its modern tech stack and easy installation, Veltrends provides a seamless experience for users and developers alike.

react
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

remix
Remix

Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.

prisma
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
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.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.