Skip to content

Latest commit

 

History

History
105 lines (83 loc) · 3.24 KB

README.md

File metadata and controls

105 lines (83 loc) · 3.24 KB
Raw

Infinite Posts

The application is built using React with TypeScript for the frontend and Python with FastAPI for the backend.

Features

  • Display a list of posts with patient descriptions and assessments
  • Infinite scroll functionality to load more posts as the user scrolls
  • Interaction with posts through "Hug" and "Comment" buttons
  • Updating backend data when a post receives a "Hug", or when a new comment is added
  • Displaying a thread of comments for each post

Prerequisites

Before running the application, ensure you have the following installed:

  • Node.js (version 14 or above)
  • npm (version 6 or above)
  • Python (version 3.7 or above)
  • FastAPI (version 0.68.0 or above)

Backend Setup

  1. Navigate to the backend directory:
cd server/
  1. Create a virtual environment (recommended):
python -m venv venv
#or
python3 -m venv venv
  1. Activate the virtual environment:

For Windows:

venv\Scripts\activate

For macOS and Linux:

source venv/bin/activate
  1. Install the required Python packages:
pip install fastapi uvicorn
#or 
pip3 install fastapi uvicorn
  1. Start the FastAPI server
uvicorn src.main:app --reload
  1. In a separate terminal, navigate to the frontend directory:
cd client/
  1. Install dependencies
npm install
  1. Start development server
npm run dev

The frontend application will run on http://localhost:5173.

Project Structure

The project is organized into two main directories:

server: Contains the FastAPI backend code and mock data

  • main.py: The main FastAPI application file
  • data/data.json: Mock data file containing post and comment information

client: Contains the React frontend code

  • src/components: Contains the main React components
    • PostList.tsx: Displays the list of posts
    • Post.tsx: Displays an individual post with its details and comments
  • src/hooks: Contains custom hooks used in the application
    • useInfiniteScroll.ts: Implements the infinite scroll functionality
      • *Note: A 1 second timeout was implemented to mimic any potential network latency and to highlght that posts are fetched dynamically as the user scrolls, rather then rendering all at once.
    • useHugs.ts: Handles the "Hug" functionality for a post
    • useComments.ts: Handles the "Comment" functionality for a post
  • src/utils: Contains utility functions
    • api.ts: Defines the API endpoints and functions for making requests to the backend
  • src/types.ts: Defines the TypeScript types and interfaces used in the application

API Endpoints

The backend API exposes the following endpoints:

  • GET /api/posts: Retrieves a list of posts starting from the specified startIndex and limited by the limit parameter.
  • PUT /api/posts/{postUrl}/hugs: Updates the number of "Hugs" for a specific post identified by postUrl.
  • POST /api/posts/{postUrl}/comments: Adds a new comment to a specific post identified by postUrl.

Additional Notes

  • The application uses Material-UI for styling and UI components.
  • The frontend and backend communicate using HTTP requests.
  • The mock data is stored in the data/data.json file in the backend directory. Modifications made to the posts and comments will be persisted in this file.