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:
- Clone the repository to your local machine.
- Ensure that a PostgreSQL database is running and update the DATABASE_URL in the server/.env file to match your database settings.
- In the terminal, navigate to the project’s root directory.
- Install the required dependencies for both the client and server by running the following command:
npm install - Run the migration to create the “users” table in the database by uncommenting the relevant line of code in server/src/index.ts.
- Start the client and server by running the following commands separately in two different terminal windows:
- Client:
npm run dev - Server:
npm run watch
- Client:
- 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.