reddit-VUEer : a Vue.js & TypeScript project

                 

This is a Vite-powered project constructed using JSON data from the reddit API. The app allows users to browse, filter and paginate through threads. interact with multimedia content, search for specific threads and subreddits, view comments, search users' profiles and activity, and more.

You can visit the app using this link.

The app in action

Mobile view

Key product features

• Strict type-checking and type-based declarations fully integrated into every part of the app.
• Utilises composition API for component setup, hooks and reactivity features.
• Data fetching and asynchronous error handling using the reddit JSON API.
• Includes end-to-end testing with Cypress and unit testing with Mocha + Chai.
• Extensive use of props, watchers, lifecycle hooks, emitted events and conditional rendering.
• Features recursive components for unknown configurations of deeply nested replies.
• Vue Router for declarative and imperative client-side navigation.
• Image gallery slideshows animated using Vue transition groups.
• Mobile-first design with an engaging user experience.

Running the project in your local environment

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project Setup

After forking and cloning the repository:

npm install

Compile and hot-reload for development

npm run dev

Type-checking

npm run type-check

Run unit tests with Cypress

npm run test:unit

Run End-to-End Tests with Cypress

# start the development server
npm run dev

# option 1: run tests in browser
npm run test:e2e:dev

# option 2: run tests in headless mode
npx cypress run --headless --browser chrome

For option 1, once the Cypress app is launched, you will need to click on the UserJourneys.cy.ts E2E spec to run the test suite.