lindaquinoa/lesson_24/React API Integration #823
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fix API endpoint URL to use correct port (4000) - Add missing React imports to main.tsx, Home.tsx, Footer.tsx - Replace mock data with real API data from /programs endpoint - Import Program type from @code-differently/types
- Add AddProgram component with title and description form fields - Implement form submission using fetch API POST to /programs - Add form validation and loading/success/error states - Create responsive SCSS styling with Code Differently brand colors - Add /add-program route to React Router configuration - Add navigation link in Header component - Include proper TypeScript types and error handling
- Add navigation redirect to home page after successful program creation - Show success message for 2 seconds before redirecting - Enhance user experience with seamless workflow - All tests passing: build, unit tests, linting, API integration
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implemented a complete React frontend that integrates with the Express API backend for program management.
Key Features:
ProgramList Component: Fetches and displays programs from /programs API endpoint
AddProgram Form: Creates new programs with validation and success messaging
Auto-refresh: Program list updates immediately after adding new programs
Navigation: Added routing and header links for seamless user experience
All tests passing (build, unit tests, linting, API integration)