TechStories - a demo app for Datadog Training

This application is used to demonstrate and teach Datadog features through labs and workshops at the Datadog Learning Center.

What is TechStories?

TechStories is a simple web application that allows users to post stories about technology. Users can also comment on stories and upvote stories and comments. The application is written using Next.js and uses a PostgreSQL database to store data. It also uses a Node.js microservice to serve inspirational quotes.

Technology used

• T3 Stack

  • Next.js
  • React
  • TRPC
  • TypeScript
  • Tailwind CSS
  • Prisma
  • Cypress
  • Jest

• PostgreSQL

• Node.js

  • Express

Datadog features used

Frontend Service

• CI Test Visibility
• RUM
• APM

How do I run TechStories?

TechStories is designed to be run directly on the host machine, as it was primarily built to demonstrate Datadog CI Test Visibility, but its other services can be run in containers using Docker Compose.

Use the following steps to run TechStories:

1. Clone this repository to your local machine.

2. Set your environment variables by copying the .env.example file to .env and filling in the values.

3. Install the dependencies for the Next.js application:

cd techstories-demo-app
npm install

1. Spin up the PostgreSQL database and Node.js microservice using Docker Compose:

docker compose up -d

1. Prepare and seed the database:

npm run db-prep

1. Start the Next.js application:

npm run dev

1. Navigate to http://localhost:3000 to view the application.

If you want to build the application for production, use the following command:

npm run build

Then run the production build using the following command:

npm run start

How do I run the tests?

TechStories uses Cypress for end-to-end testing and Jest for unit testing.

End-to-end tests

To run the end-to-end tests, use the following command:

npm run e2e
# or
npm run e2e:headless # Run in headless mode

To run the tests for Datadog CI Test Visibility, use the following command:

npm run dd-e2e

Unit tests

To run the unit tests, use the following command:

npm run test

To run the tests for Datadog CI Test Visibility, use the following command:

npm run dd-test

User stories

Use the following user stories to learn about the features of TechStories:

As a user, I want to be able to view stories posted by other users.

1. Navigate to http://localhost:3000.

2. On the home page, you should see a list of stories that have been posted by other users. Each story should display the title, author, date, and number of votes and comments.

3. Click on a story to view the story's contents, comments, and upvote button.

As a logged-in user, I want to be able to post a story.

1. Navigate to http://localhost:3000.

2. Click the "Sign in" button in the top right corner of the page.

3. Use the following credentials to log in:

• Username: [email protected]
• Password: password

1. Click the "+ New Post" button in the top right corner of the page.

2. Enter a title and contents for your story, then click the "Submit" button. You can use Markdown.

3. You should be redirected to the home page, where you should see your story at the top of the list.

Note: You cannot register a new user at this time.

As a logged-in user, I want to be able to vote on a story.

1. Navigate to http://localhost:3000.

2. Use the credentials from the previous user story to log in.

3. Click on a story to view the story's contents, comments, and upvote button.

4. Click the upvote button. The number of votes should increase by one.

As a logged-in user, I want to be able to comment on a story.

1. Navigate to http://localhost:3000.

2. Use the credentials from the previous user story to log in.

3. Click on a story to view the story's contents, comments, and upvote button.

4. Scroll to the bottom of the page and enter a comment in the text box.

5. Click the "Submit" button. Your comment should appear at the bottom of the list of comments.

As a user, I want to be able to view inspirational tech quotes.

1. Navigate to http://localhost:3000.

2. Scroll to the top of the page. You should see an inspirational quote.

3. Click the "Get a New Quote" button. A new quote should appear.

Note: This will sometimes lag or fail due to the microservice being slow or down. This is intentional.

Folder structure

The TechStories repository is organized as follows:

• cypress - Contains the end-to-end tests for the application and any supporting files. The actual tests are in the cypress/e2e folder.

• prisma - Contains the Prisma schema and migrations for the application, along with the seed data and a script to seed the database.

  Use the schema.prisma file to better understand the relationships between the tables in the database.

• public - Contains the public assets for the application, such as images and fonts.

• services - Contains the Node.js microservice that serves inspirational quotes.

• src - Contains the source code for the Next.js application.

  • __tests__ - Contains the unit tests for the application.
  • components - Contains the React components for the application's UI and functionality.
  • hooks - Contains the logic for some of the functionality utilized by the components.
  • layouts - Contains the React components for the application's layouts.
  • pages - Contains the Next.js pages and API routes for the application.
    • api - Contains the API routes for the application (accessible through /api).
    • auth - Contains the pages for the authentication flow (accessible through /auth).
    • posts - Contains the pages for viewing and creating posts (accessible through /posts).
    • _app.tsx - Contains the Next.js application component. This is where RUM is initialized.
    • index.tsx - Contains the home page for the application (accessible through /).
  • server - Contains the server-side code for the application. There's a lot of TRPC boilerplate here, along with the code for the Prisma client.
  • styles - Contains the Tailwind CSS and custom CSS styles for the application.
  • types - Contains the TypeScript types for the application.
  • utils - Contains utility functions for the application.