DEV Community: sherylmichaela

Improving User Signup Experience: Auto-Login After Registration

sherylmichaela — Tue, 10 Sep 2024 12:25:42 +0000

When users sign up for a service, the best experience is one where they can jump straight into using the app without needing to go through multiple steps. I wanted users to be logged in immediately after creating their account, reducing friction. In this blog, I'll talk about how I implement this feature, using Flask for the backend and React on the frontend.

Frontend: React Signup Form
The signup process starts with a form where users enter their details (username, email, and password). To ensure a smooth and intuitive experience, I included validation checks and error handling on the frontend before any data is sent to the backend.

const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [signupError, setSignupError] = useState("");

async function signup(e) {
  e.preventDefault();

  try {
    const response = await fetch("/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, email, password }),
    });

    const data = await response.json();

    if (response.ok) {
      setUser(data); 
    } else {
      setSignupError("Username/email already in use.");
    }
  } catch (error) {
    setSignupError("An error occurred. Please try again.");
  }
}

Upon a successful POST request to /signup, the setUser function is called, storing the user details, which also logs the user in by setting the global user state.
If the response is unsuccessful, an error message is displayed, ensuring users are informed if something goes wrong.

Backend: Flask Signup and Auto-Login
On the server side, Flask handles the logic to create a new user and automatically logs them in by setting a session.

class Signup(Resource):

    def post(self):
        try:
            user = User(username=request.json.get('username'), email=request.json.get('email'), hashed_password=request.json.get('password'))

            db.session.add(user)
            db.session.commit()

            session['user_id'] = user.id

            if user.id:
                session['user'] = user.to_dict() # Include to_dict() to make it JSON serialisable.

                return make_response(user.to_dict(), 201)

            return make_response({"error": "Signup unsucessful"}, 403)

        except ValueError as ve:
            return make_response({"error": str(ve)}, 409)

After successfully creating a new user and committing it to the database, I store the user’s ID in the session, effectively logging them in.
I also return the user’s data to the frontend, which updates the global state, allowing the user to navigate the app without needing to log in again.

Conclusion
By combining frontend validation and an efficient backend session management process, users can now create their accounts and immediately start using the app without the hassle of logging in twice. This small yet impactful feature enhances the overall user experience, making the signup flow more seamless.

A Step-by-Step Guide to Setting Up Class Resources for a Task Management App in Flask

sherylmichaela — Sun, 04 Aug 2024 13:18:13 +0000

For my current phase project, I've chosen to develop a Personal Task Management App. I'll use it to explain, step by step, how to set up class resources, Tasks and TaskById, using Flask. These classes will handle creating, retrieving, updating, and deleting tasks.

Before you begin, make sure Python is installed in your system. Then, head to the terminal in VSCode and run the code below in the root folder:

pipenv install flask flask-sqlalchemy flask-restful

Step 1: Set Up Your Flask Application
We'll create a new Flask app and configure the necessary components:

from flask import Flask, request, session, make_response
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
from flask_migrate import Migrate
from flask_restful import Api, Resource
from datetime import datetime

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'
app.config['SQLALCHEMY_TRACK_MODIFICATION'] = False
app.config['SECRET_KEY'] = 'your_secret_key'

db = SQLAlchemy()
migrate = Migrate(app, db)
db.init_app(app)
api = Api(app)
CORS(app)

This step involves setting up the basic configuration for your Flask application, including integrating SQLAlchemy for database management and Flask-RESTful for building RESTful APIs.

Flask: The main framework to create web apps
request: To handle incoming HTTP requests
session: To manage user sessions (e.g., storing user_id when a user is logged in).
make_response: To create HTTP responses.
SQLAlchemy: A SQL toolkit and Object-Relational Mapping (ORM) system.
CORS: Cross-Origin Resource Sharing (CORS), restricts web pages from making requests to a different domain than the one that served the web page.
Migrate: To handle database migrations in a Flask application
Api, Resource: Provided by Flask-RESTful, used to create RESTful API endpoints.
datetime: To handle date and time-related tasks

Step 2: Define Task Model
Next, define the Task model, which represents a task in your database:

class Task(db.Model):
    __tablename__ = "tasks"

    id = db.Column(db.Integer, primary_key=True)
    task_name = db.Column(db.String(255), nullable=False)
    category = db.Column(db.String(255))
    task_due_date = db.Column(db.DateTime)
    task_status = db.Column(db.String, default="pending")

Step 3: Create the Tasks and TaskById Resource

The Tasks resource will handle requests to the /tasks endpoint. It will allow users to retrieve and create tasks.
The TaskById resource will handle requests to the /tasks/<int:id> endpoint. It will allow users to retrieve, update, and delete a specific task.

class Tasks(Resource):
    # /tasks

    def get(self):

        if 'user_id' in session:
            my_tasks = Task.query.filter(Task.user_id == session['user_id']).all()

            if len(my_tasks) > 0:
                tasks = [task.to_dict() for task in my_tasks]
                return make_response(tasks, 200)

            return make_response({"message": "No task created yet"}, 200)

        return make_response({"error": "Pls log in to view tasks."}, 401)

    def post(self):
        task_name = request.json.get('task_name')
        category = request.json.get('category')
        task_due_date = datetime.strptime(request.json.get('task_due_date'), '%Y-%m-%d')
        task_status = request.json.get('task_status', 'pending')

        new_task = Task(task_name=task_name, category=category, task_due_date=task_due_date, task_status=task_status, user_id=session['user_id'])

        db.session.add(new_task)
        db.session.commit()

        if new_task.id:
            return make_response(new_task.to_dict(), 201)

        return make_response({"error": "error occurred"}, 400)


class TaskById(Resource):
    # /tasks/<int:id>

    @classmethod
    def find_task(cls, id):
        return Task.query.filter(and_(Task.id == id, Task.user_id == session['user_id'])).first()

    def get(self, id):

        if 'user_id' in session:
            task = TaskById.find_task(id)

        if task:
            return make_response(task.to_dict(), 200)

        return make_response({"error": "This task doesn't exist or you may not have permission to view this task"}, 401)

    def patch(self, id):
        task = TaskById.find_task(id)

        if task:
            for attr in request.json:
                if attr == "task_due_date":
                    request.json[attr] = datetime.strptime(request.json[attr], '%Y-%m-%d')  
                setattr(task, attr, request.json[attr])

            db.session.commit()

            return make_response(task.to_dict(), 200)

        return make_response({"error": "No task found"}, 404)

    def delete(self, id):
        task = TaskById.find_task(id)

        if task:
            db.session.delete(task)
            db.session.commit()

            return make_response({"message": "Task is deleted successfully"}, 200)

        return make_response({"error": "No task found"}, 404)

Step 4: Add Resources to the API

api.add_resource(Tasks, '/tasks')
api.add_resource(TaskById, '/tasks/<int:id>')

db: An instance of SQLAlchemy, initialized with the Flask application instance. This sets up the connection between the Flask app and the database, allowing you to define and interact with database models.
api: An instance of Flask-RESTful's Api. This sets up the framework for adding RESTful API resources to your application.

Basic Operations and Integration in Python & SQLite

sherylmichaela — Thu, 06 Jun 2024 04:14:52 +0000

In this blog post, I aim to cover some fundamental operations and integration techniques for using Python with SQL. Given my tendency to be a bit forgetful, this blog will serve as a handy reminder for setting up a Python SQLite environment from scratch, and I hope it will benefit you too!

I will be using a recent restaurant food order app which I did for my phase project as an example in this post. You can fork this project using this link to follow along.

How to connect Python to SQLite Database?

Create the root directory. i.e. restaurant-food-order-app
Create a sub-directory and name it lib. All your .py files will live here.
Inside the lib folder, create a models.py file.
Inside Terminal, navigate to the /restaurant-food-order-app/ directory. Install dependencies such as SQLAlchemy and Alembic using pipenv install sqlalchemy alembic. The pipenv tool is used for managing Python dependencies, virtual environments, and Pipfile dependencies.
Run pipenv shell to run the virtual environment.
Import required modules, initialise the database and define the models. You can refer to my models.py file.
Initialise Alembic by running alembic init migrations.
Locate and open the alembic.ini file. Look for sqlalchemy.url setting. Modify the URL which points to your database. i.e. sqlalchemy.url = sqlite:///lib/data.db
Locate and open the env.py file. Look for target_metadata = None and replace it with:

from models import Base
target_metadata = Base.metadata

from models import Base imports the base class for your SQLAlchemy models.
target_metadata = Base.metadata sets Alembic’s target metadata to the collection of table definitions from your SQLAlchemy models, enabling Alembic to manage and synchronise your database schema based on these definitions.

Once all of the above is done, run alembic revision --autogenerate -m "Create models". This is used to create a new Alembic revision file that includes automatically generated migration scripts. Then, run alembic upgrade head to upgrade to the latest database version. Run alembic current to check the current database version you're in.

How to set up a SQLAlchemy engine and session for interacting with a SQLite database?

Create a config.py file inside the lib folder. Include the following code:

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker

engine = create_engine("sqlite:///lib/data.db")
Session = sessionmaker(bind=engine)
session = Session()

create_engine is a function from SQLAlchemy that creates a new database engine instance.
sessionmaker is a factory for creating new Session objects, which are used to interact with the database.
create_engine("sqlite:///lib/data.db") creates a new SQLAlchemy engine that connects to a SQLite database located at lib/data.db.
sessionmaker(bind=engine) creates a configurable session factory, Session, which will create Session objects that are bound to the engine. Binding the session to the engine means that any session created by this factory will use the specified engine to connect to the database.
Session() creates an instance of a session object from the session factory. This session object is used to interact with the database. You can use it to execute queries, add and delete objects, and commit transactions.

Once done, you can import the above in your other .py files to interact with your database by including the following code:

from config import session

SQL Queries and CRUD Operations in Python

With everything set in place, you can now proceed to perform various database operations. In this example, I will be working with the Customer object which has the following attributes: first_name, last_name and mobile.

Adding an Object: This code adds a new Customer object to the database and commits the transaction.

new_customer = Customer(first_name="John", last_name="Doe", mobile="0412345678")
session.add(new_customer)
session.commit()

Querying the Database: This code retrieves all Customer objects from the database and prints their first and last names.

customers = session.query(Customer).all()
for customer in customers:
   print(f"{customer.first_name} {customer.last_name}")

Updating an Object: This code updates the first name of the first user found with the mobile "0412345678" to "Andy" and commits the transaction.

customer = session.query(Customer).filter(mobile="0412345678").first()
customer.first_name = "Andy"
session.commit()

Deleting an Object: This code deletes the user named "Andy Doe" from the database and commits the transaction.

customer = session.query(Customer).filter(first_name="Andy", last_name="Doe").first()
session.delete(customer)
session.commit()

What are useState, useEffect and useRef hooks?

sherylmichaela — Fri, 29 Mar 2024 23:47:42 +0000

In this post, I'd like to touch on some of the commonly used React hooks. React hooks are first introduced in React 16.8. They allow functional components to use state, side effects, and create references to DOM elements respectively. They let you use state and other React features without writing a class.

useState

const [count, setCount] = useState(0)

useState is a hook that allows functional components to manage state within the component.
When you call useState, it returns an array with two elements: the current state value and a function that lets you update it. (i.e. [count, setCount])
The initial state is passed as an argument to useState. (i.e. useState(0))

Applying the useState hook
I like to use the useState hook to manipulate button states.

const [buttonText, setButtonText] = useState("Add To Cart");
const [buttonDisabled, setButtonDisabled] = useState(false);

const handleClick = () => {
    setButtonText("Added to Cart!");
    setButtonDisabled(true);
  };

<Button variant="primary"
        disabled={buttonDisabled}
        onClick={handleClick}>
        {buttonText}
</Button>

What this code does:
It creates a button component that starts enabled with the text "Add To Cart". When clicked, the text changes to "Added to Cart!" and the button becomes disabled.

Explanation:

The initial value of buttonText is set to "Add To Cart", and the initial value of buttonDisabled is set to a Boolean value.
The useState hook returns an array with two elements: the current state value and a function to update that value.
The handleClick function will be called when the button is clicked. Inside this function, setButtonText is called with the argument "Added to Cart!" to update the button text, and setButtonDisabled is called with true to disable the button.

useEffect

useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

useEffect is a hook that allows functional components to perform side effects (such as data fetching, subscriptions, or manually changing the DOM) after the component renders.
It takes a function as its first argument, which contains the code for the side effect.
By default, useEffect runs after every render, including the initial render.
You can specify dependencies as the second argument to control when the effect is re-run.

Applying the useEffect hook
This hook is commonly utilised for fetching data.

const [wishlistItems, setWishlistItems] = useState([]);

useEffect(() => {
    fetch("http://localhost:4000/wishlist")
      .then((response) => response.json())
      .then((json) => {
        setWishlistItems(json);
      });
  }, []);

What this code does:
It fetches wishlist items from a server when the component mounts and updates the component's state with the fetched data.

Explanation:

useEffect is like a special function in React that runs some code when something in the component changes.
In this example, it initiates a fetch request to the specified URL and fetches data from the server.
Next, it chains a 'then' method to the fetch call to parse the response body as JSON. This converts the response from the server into a JavaScript object.
It then chains another 'then' method to handle the parsed JSON data. Here, it updates the 'wishlistItems' state with the fetched JSON data.
Finally, the hook is configured with an empty dependency array [], which ensures that the effect runs only once after the component mounts.

useRef

const target = useRef(null);

The useRef Hook allows you to reference a value that’s not needed for rendering.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.

Applying the useRef hook
In my project, I used the useRef hook to create a reference to a DOM element (the button) so that it can be accessed and used elsewhere in the component, such as positioning an overlay relative to the button.

const [show, setShow] = useState(false);
const target = useRef(null);

const handleAddToWishlistBtn = () => {
    setShow(true);

    setTimeout(() => {
      setShow(false);
    }, 2000);

  };

<Button
          variant="danger"
          ref={target}
          onClick={handleAddToWishlistBtn}
        >
          Add to Wishlist
</Button>
        <Overlay target={target.current} show={show} placement="right">
          {(props) => (
            <Tooltip id="overlay-example" {...props}>
              Added to Wishlist!
            </Tooltip>
          )}
        </Overlay>

What this code does:
When the "Add to Wishlist" button is clicked, an overlay tooltip appears next to it, displaying the message "Added to Wishlist!". The tooltip disappears after 2 seconds. The positioning of the tooltip is determined by the button element.

Explanation:

const target = useRef(null) here is used to reference my button element without causing unnecessary re-renders when the ref's value is updated.
The target.current reference is then passed as the target prop to the component. This allows the overlay to position itself relative to the button element.
As such, when the component is triggered to appear or disappear, it doesn't cause the entire page to re-render. Instead, React only updates the parts of the DOM that have changed, which in this case would be the rendering of the overlay itself.

Phase 1 - Javascript

sherylmichaela — Sat, 10 Feb 2024 01:00:04 +0000

Navigating through Phase 1, delving into the intricacies of JavaScript has been quite a challenge. While working on the Phase 1 project, I've found the experience enjoyable, yet it has underscored the vast scope for further improvement. In this blog, I intend to outline the processes and hurdles encountered during the project and share the valuable lessons gleaned from these experiences.

The primary objective of this project revolves around the utilisation of the Fetch API, facilitating API requests for data retrieval and server data submission. Given the abundance of concepts not covered in this phase, a significant portion of the project involves extensive research and trial-and-error to ensure the seamless functionality of this Single Page Application (SPA).

The first lesson learned was the effective use of the "change" event and event.target.value to access an element's value. This knowledge proved crucial in utilising the chosen value within the fetch(url) through string interpolation, enabling access to the relevant API endpoint.

 dropDown.addEventListener("change", (event) => {
    currentValue = event.target.value;
  });

let url = `http://www.boredapi.com/api/activity?participants=${currentValue}`

Additionally, I discovered that I could employ the .type and .className properties in JavaScript to define the type and class attributes for the 'Save' and 'Delete' buttons. This allowed me to utilise Bootstrap button styles effectively, especially considering that these buttons are generated only when the function is invoked.

// Save button
   saveBtn = document.createElement("button");
   saveBtn.type = "button";
   saveBtn.className = "btn btn-primary save-btn";
   saveBtn.innerHTML = "Save";

// Delete button
   deleteBtn = document.createElement("button");
   deleteBtn.type = "button";
   deleteBtn.className = "btn btn-danger delete-btn";
   deleteBtn.innerHTML = "Delete";

Furthermore, the act of populating the retrieved data and arranging it within table rows provided an opportunity to apply diverse document methods such as .querySelector(), .createElement(), .innerHTML, and .appendChild().

let table = document.querySelector("#tbody");
let row = document.createElement("tr");
table.appendChild(row);

// Create columns
   let c1 = document.createElement("td");
   let c2 = document.createElement("td");
   let c3 = document.createElement("td");
   let c4 = document.createElement("td");
   let c5 = document.createElement("td");

// Activity data input into table
   c1.innerHTML = data.activity;
   c2.innerHTML = data.type.charAt(0).toUpperCase() + data.type.slice(1);
   c3.innerHTML = data.accessibility;
   c4.appendChild(saveBtn);
   c5.appendChild(deleteBtn);

// Adding td element with activity info to tr element
   row.appendChild(c1);
   row.appendChild(c2);
   row.appendChild(c3);
   row.appendChild(c4);
   row.appendChild(c5);

Finally, a notable aspect of this phase involved mastering the utilisation of the JavaScript Object Notation (JSON) server to generate mock APIs without the necessity for intricate server-side coding. Throughout this project, I successfully employed the post method to transmit data, such as the activity name, type, and accessibility rating, to the mock server. This newfound skill will undoubtedly prove invaluable in my future front-end development endeavours, particularly when a backend API is not yet available.

// Posting data to json server using the save button
   saveBtn.addEventListener("click", () => {
     return fetch("http://localhost:3000/data", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
       },
       body: JSON.stringify({
         activity: data.activity,
         type: data.type,
         accessibility: data.accessibility,
       }),
     }).then((response) => response.json());
   });

While the JavaScript phase was brief, there remains a wealth of knowledge to explore. It was challenging to absorb all the information within this limited timeframe. Fortunately, technology, particularly platforms like Google, allows us to leverage the online collective expertise to troubleshoot and improve the functionality of my code.

Here goes nothing...

sherylmichaela — Fri, 01 Dec 2023 11:11:11 +0000

Starting a new habit of writing blogs to kickstart my software engineering journey. 😁