Hey there, aspiring developer! Let me take you on a coding journey, one that may just lead you to build the type of full-stack application that dreams (and modern web development) are made of. I'm about to peel back the curtain and show you its inner workings—but hold on. Before we dive headlong into the code, let's have a chat about the tech stack that powers it and the treasure trove of knowledge you'll gain by sticking around.

The engine room of our app is none other than Python, paired with a handy framework called Flask. It's our secret sauce for crafting a REST API that's as smooth as your morning coffee. The front end? Oh, it's a beauty—(JavaScript) React, spruced up with a UI library that's like a shot of espresso for your design process. What you see before you is the result of blending these technologies, a process more artistic than scientific, to give birth to this beautiful interface in mere minutes.

Now, I bet you're thinking, "Sure, I can probably learn to build a full-stack app with React and Python on my own." And you're not wrong, but why wander through the wilderness when I've mapped out the path for you? This video is your cheat sheet, condensing days of learning, experimenting, and mastering best practices into a little over a couple of hours. I'm handing over my playbook—everything I've learned from my adventures in code—so you can bypass the long nights I've spent in front of my monitor.

And it’s not just about building the app; it's about launching it into the world so you can show it off on your resume or to your pals. You'll be guided through the entire deployment process, teaching you how to send your Python projects into the online cosmos at no cost. Understand this, and you suddenly unlock the ability to deploy any Python creation your mind conceives. Think of it as getting the keys to the Python kingdom.

Here’s the kicker: it doesn’t matter if you're team Windows, Mac, or Linux—I’ve got you covered. I’ll be your tech translator, offering up the precise commands for your OS. Along our journey through this course, we’ll be talking best practices like the cool kids. Wondering why virtual environments are a must for your Python ventures? Curious about the art of separating your data models and routes? Stick with me, and I'll spill all the secrets.

Let's div in and get started!

Table of Contents ⚙️ Tech Stack: Python, React, SQLite, SQLAlchemy, Flask, Chakra UI

✅ CRUD Functionality: Seamlessly create, read, update, and delete friends from your store.

🔒 Best Practices: Utilizes best practices such as creating virtual environments (venv) for a clean and isolated development environment.

🌐 Deployment: Deployed on Render for free.

🎨 Stylish UI Components: Enhanced user experience with stylish UI components provided by Chakra UI.

🌓 Light and Dark Mode: Enjoy a personalized user interface experience with light and dark mode options.

📱 Responsive Design: The app is designed to adapt to various screen sizes, ensuring a consistent experience across devices.

Video (instructions below):

Run the App Locally

Clone the repository:

git clone https://github.com/burakorkmez/react-python-tutorial

Navigate to the project directory:

cd react-python-tutorial

Navigate to the backend directory:

cd backend

Create a virtual environment: On macOS and Linux:

python3 -m venv venv

On Windows:

python -m venv venv

Activate the virtual environment: On macOS and Linux:

source venv/bin/activate

On Windows:

venv\Scripts\activate

Install the dependencies: On macOS and Linux:

pip3 install -r requirements.txt

On Windows:

pip install -r requirements.txt

Navigate to the frontend directory:

cd ../frontend

Install the dependencies:

npm install

Build the frontend:

npm run build

Navigate to the backend directory:

cd ../backend

Run the Flask app:

flask run

Open your browser and go to http://localhost:5000/ to view the app.