Creating a Project from Start to Finish: A Step-by-Step Guide

I recently had a conversation with a friend who was a bit confused about how to create a project from start to finish. We all know there are tons of templates out there, but it can get overwhelming trying to figure out which one to use. So, I thought I’d share my approach to simplify the process!

Step 1: Setting Up Your Project with Vite(I found out it's pronounced Vit not Veet)
I love using Vite to kick off my projects because it’s straightforward and efficient. Let’s create a project called Spice-Rack:

mkdir spice-rack
cd spice-rack

This will create an empty folder to start with. Now, let’s initialize our Vite project:

npm create vite@latest

You’ll be prompted to choose a framework; I usually go with React, but feel free to pick whatever suits your needs. Next, select your language of choice—I'll stick to simple vanilla JavaScript.

After that, your project folder will fill up with files. To keep things organized, let’s install the necessary dependencies:

npm install

Step 2: Organizing Your Project Structure
Now that our dependencies are installed, let’s organize our files. I like to create a folder named frontend to hold all my frontend components:

mkdir frontend

Drag all your installed files (except .gitignore) into this frontend folder for easier accessibility.

Step 3: Version Control with Git
Next, let’s ensure our project is version-controlled. Run:

git init

This command sets up a new Git repository in your project folder, allowing you to track changes effectively. Then, add all your files:

git add --all

Commit your changes with a message:

git commit -m 'initial commit'

Now, head over to your GitHub account, click the “+” in the top right corner, and select New Repository. You can choose to make it public or private and name it whatever you like. Make sure to uncheck "Initialize this repository with a README" since we already have one and click Create Repository.

Once created, copy the provided URL and run:

git remote add origin [e-mail]:your-username/your-project-name.git

Finally, push your changes to GitHub:

git push -u origin main

Step 4: Setting Up the Backend
Now that our frontend is live on GitHub, let’s integrate our backend. Create a new folder named backend in your project directory:

mkdir backend

cd backend

Create a virtual environment using Pipenv:

pipenv install

Then, install Flask:

pipenv install Flask

Step 5: Configuring Your Flask App
Let’s create a config.py file to facilitate communication between our frontend and backend. Here’s a template you can customize:

from flask import Flask
from flask_cors import CORS
from flask_migrate import Migrate
from flask_restful import Api
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import MetaData

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.json.compact = False

metadata = MetaData(naming_convention={
    "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
})
db = SQLAlchemy(metadata=metadata)
migrate = Migrate(app, db)
db.init_app(app)

api = Api(app)

CORS(app, resources={r"/api/*": {"origins": "*"}})

Step 6: Creating Your First API Endpoint
Now, let’s create an endpoint that our frontend can use. Create an app.py file in the backend folder and add the following code:

from config import app

@app.route('/api/spices', methods=['GET'])
def get_spices():
    spices = [
        {"name": "Basil"},
        {"name": "Cilantro"},
        {"name": "Rosemary"}
    ]
    return {"spices": spices}

if __name__ == '__main__':
    app.run(debug=True)

This simple endpoint returns a list of spices, which can easily be fetched by your React app.

And there you have it! You’ve now set up a project from scratch with a frontend in React and a backend in Flask, complete with Git version control and a simple API endpoint.

I hope this helps demystify the process for those who might be feeling lost! If you have any questions or tips of your own, feel free to share in the comments! 💬