FNB App Academy Notes 10 May 2025
1. The Shift from Web Pages to Web Apps
Now that you’re confident building websites, it’s time to shift your mindset from static pages to interactive, data-driven applications. Web apps handle logic, store and process data, and often communicate with backends and APIs. Your goal is to bridge the gap between a “developer who designs” and a “developer who builds systems.”
Key Concepts:
State Management: Apps track data over time (e.g., login status, user input).
User Flow: Apps have multi-step journeys—login, dashboards, forms, etc.
Dynamic Interfaces: Components render differently based on user interaction or data.
Try This:
Convert your static portfolio into a mini web app with a contact form and validation.
Use JavaScript to show/hide sections based on menu selection.
2. Introduction to Front-End Frameworks (React Basics)
Web apps are easier to build and maintain with frameworks like React, which allow component-based architecture and easier state management.
Why React?
Reusable components
Powerful state and event handling
Integrates well with APIs and other tools
Key React Concepts:
JSX: Write HTML inside JavaScript.
Components: Split UI into reusable parts.
Props and State: Pass data and track changing values.
Hooks: Functions like useState and useEffect that add interactivity.
Practice:
Build a simple React app that shows a list of items (e.g., tasks or notes).
Add a form to add or remove items.
3. Project File Structure and Modular Design
As projects grow, organizing code becomes critical.
Sample File Structure:
src/
|– components/
| |– Header.js
| |– Footer.js
|– pages/
| |– Home.js
| |– Contact.js
|– App.js
|– index.js
Best Practices:
Break your UI into components.
Use folders to group related logic.
Keep styles scoped to components when possible (CSS Modules or styled-components).
Try This:
Refactor a project into multiple files and components.
Use props to pass data between them.
4. Using State for Interactivity
State is what makes apps feel alive.
Example:
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>Click Me</button>
Common Use Cases:
Form inputs
Toggles (dark mode, menus)
Dynamic content (comments, likes, cart items)
Practice:
Build a counter, a like button, and a form that stores input in state.
5. Routing in Web Apps
Routing allows you to create multi-page apps without refreshing the browser.
Tool: React Router
npm install react-router-dom
Key Concepts:
<BrowserRouter>: Wraps the app.
<Routes> and <Route>: Define paths.
<Link>: Navigation without page reload.
Practice:
Add routes like /, /about, and /contact to your app.
6. Forms and Validation
Real-world apps include forms for user input.
Concepts:
Controlled components
Basic validation (required fields, email formats)
Error messages and user feedback
Libraries to Explore:
Formik
React Hook Form
Yup (for validation schemas)
Try This:
Create a login form with email and password.
Add error handling for empty fields.
7. Connecting to APIs
Apps rarely work in isolation—they get data from APIs.
Fetching Data:
useEffect(() => {
fetch(“https://api.example.com/data”)
.then(res => res.json())
.then(data => setData(data));
}, []);
Tools:
fetch
axios
Async/await syntax
Practice:
Build a news or weather app using a public API (like NewsAPI or OpenWeather).
8. Authentication Basics
Most apps have secure sections.
Types of Auth:
Frontend-only auth: Login via hardcoded credentials (practice only).
JWT-based Auth: Token sent from backend on login.
OAuth: Login with Google, GitHub, etc.
What to Learn:
Managing tokens in localStorage
Redirecting users after login/logout
Protecting private routes
9. App Deployment (Netlify, Vercel, Firebase)
Publishing your app is part of the workflow.
Tools:
Netlify: Connects with GitHub; simple auto-deploy.
Vercel: Optimized for React/Next.js.
Firebase Hosting: Free and fast.
Try This:
Deploy your React app to Netlify.
Add a custom domain (free with Netlify).
10. Backend Basics (Node.js + Express)
Apps need servers to handle logic, save data, and provide APIs.
What to Learn:
Express.js for building routes (GET, POST)
Middleware (like bodyParser)
Connecting to databases (e.g., MongoDB)
Try This:
Build a backend that receives contact form data.
Save that…