Diagram

TODO:

Frontend ↔ API ↔ Backend

Backend

Used to host the meat of the product. Hosted on a server, it responsible for storing and organising data, and ensuring everything on the client-side actually works.

Python (Flask)

https://flask.palletsprojects.com/en/3.0.x/

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

Express

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

API Development

The API becomes your bible for communicating between the frontend and the backend. I like to define my APIs using Swagger, and define for each path:

• 200 response, including the type of object that should be returned

• 400 response(s)

• 500 response

Frontend

Website?: React + Node.js

App?: React Native + Expo

Component-Driven Design

See my other post: blog.mrjonhudson.com/cdd

A Component

// component.tsx

import React, { PropsWithChildren } from 'react'

type ComponentProps = {
    // Define the props of the component here
}

const Component = (props: PropsWithChildren<TextProps>) => {
    return (
        // Write the component elements here
        // Insert children with {props.children}
        <View style={[styles.view]}>
	        {..//}
        </View>
    )
}

export default Component

const styles = StyleSheet.create({
	view: {
	// define styles SPECIFIC to this component here
	// make sure to base these styles on the global styles
	}
})

Source