More Premium Hugo Themes Premium React Themes

Wern Fullstack Template

React, Next.js, MaterialUI, Styled-Components, TypeGraphQL, URQL, ApolloServer (express), TypeORM, PostgreSQL, Node.js, TypeScript

Wern Fullstack Template

React, Next.js, MaterialUI, Styled-Components, TypeGraphQL, URQL, ApolloServer (express), TypeORM, PostgreSQL, Node.js, TypeScript

Author Avatar Theme by braydenwerner
Github Stars Github Stars: 177
Last Commit Last Commit: Jun 4, 2021 -
First Commit Created: Jan 15, 2024 -
Wern Fullstack Template screenshot

Overview

This repository is inspired by benawad’s lireddit and offers several features for a web application. It includes server-side rendering of data from a PostgreSQL database, a user graphql mutation with password encryption, a graphql query to fetch users, and support for a light/dark theme with a switch component. The project utilizes React, Next.js, MaterialUI, Styled-Components, TypeGraphQL, URQL, ApolloServer, Express, TypeORM, PostgreSQL, Node.js, and TypeScript.

Features

  • Server-side rendered data from PostgreSQL: Data from the PostgreSQL database is rendered on the server side.
  • Password-encrypted user graphql mutation: The application includes a mutation to create users with password encryption.
  • User graphql query: A graphql query is available to fetch users.
  • Light/dark theme support: The application supports both light and dark themes, along with a switch component for easy toggling.
  • Technologies used: The project utilizes React, Next.js, MaterialUI, Styled-Components, TypeGraphQL, URQL, ApolloServer, Express, TypeORM, PostgreSQL, Node.js, and TypeScript.

Installation

To run this application locally, follow the steps below:

  1. Clone the repository to your local machine.
  2. Ensure that a PostgreSQL database is running and update the DATABASE_URL in the server/.env file to match your database settings.
  3. In the terminal, navigate to the project’s root directory.
  4. Install the required dependencies for both the client and server by running the following command:
    npm install
    
  5. Run the migration to create the “users” table in the database by uncommenting the relevant line of code in server/src/index.ts.
  6. Start the client and server by running the following commands separately in two different terminal windows:
    • Client:
      npm run dev
      
    • Server:
      npm run watch
      
  7. The application should now be running locally. Open a web browser and navigate to http://localhost:3000 to view the client.

Summary

In summary, this repository provides a web application with server-side rendering, user creation with password encryption, user fetching via GraphQL, and support for light/dark themes. It employs a variety of technologies including React, Next.js, MaterialUI, and more. To run the application locally, ensure that a PostgreSQL database is set up and follow the installation guide provided.