Skip to content

Alx Final Portfolio Project a Note App web-based application designed to allow users to create, view, and delete notes.

License

Notifications You must be signed in to change notification settings

elyse502/note-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ALX-Banner

footer

ALX WEB-Stack Portfolio: Note AppπŸ—’οΈ

Welcome to my ALX Final Portfolio! This portfolio showcases the development of a Note App, which is a web-based application developed as part of the ALX-Africa Software Engineering programme. Below, you'll find detailed information about the project, its components, and how to set it up.

Table of Contents

unnamed


Overview

The Note App is a web-based application designed to allow users to create, view, and delete notes. It's built using the Flask web framework and incorporates features such as user authentication, database storage, and dynamic rendering of content. The project demonstrates proficiency in backend development and serves as a showcase of Full Stack Software Engineering skills.


Technologies-Used

The Note App project utilizes the following technologies and tools:

  • Flask: A lightweight web application framework for Python.
  • Object-Oriented Programming (OOP): Utilized for efficient code organization and maintainability.
  • SQLite: A relational database management system used for storing user data and notes.
  • Flask-Login: A Flask extension for managing user sessions and authentication.
  • Bootstrap: A front-end framework for designing responsive and mobile-first websites.
  • Jinja: The most popular template engine for Python projects.
  • JavaScript: Used for client-side scripting and dynamic interactions.
  • jQuery: A fast, small, and feature-rich JavaScript library for simplifying client-side scripting.
  • HTML: The standard markup language for creating web pages and applications.
  • CSS: Cascading Style Sheets for styling HTML elements and enhancing the visual presentation.
  • Git: A version control system for tracking changes in the project codebase.
  • GitHub: A platform for hosting and collaborating on Git repositories.

These technologies collectively enable the development of a robust and user-friendly web application for managing notes effectively.


Components

The project consists of the following components:

  • Src/ - The main directory containing the application source code.
    • instance/ - Directory containing the SQLite database file (database.db).
    • website/ - Directory containing the Flask application code.
      • static/ - Directory containing static files such as CSS and JavaScript.
        • index.js - JavaScript file containing client-side functionality.
      • templates/ - Directory containing HTML templates.
        • base.html, home.html, login.html, sign_up.html - HTML templates for different pages.
      • __init__.py, auth.py, models.py, views.py - Python modules containing application logic.
  • main.py - Main Python script to run the Flask application.
  • requirements.txt - File containing dependencies required to run the application.

Installation

To install and run the Note App on your local machine, follow these steps:

  1. Clone the repository:

    $ git clone https://github.com/your-username/note-app.git
  2. Navigate to the project directory:

    $ cd note-app
  3. Create a virtual environment (optional but recommended):

    $ python -m venv venv
  4. Activate the virtual environment:

    • On Windows:
    $ venv\Scripts\activate
    • On macOS and Linux:
    $ source venv/bin/activate
  5. Install dependencies:

    $ pip install -r requirements.txt
  6. Run the Flask application:

    $ python main.py
  7. Access the application in your web browser at http://localhost:5000.


Usage

Once the application is running, you can access it in your web browser. Here are some key features:

  • Home Page: View existing notes and add new ones.
  • Login Page: Authenticate with your email and password.
  • Sign-Up Page: Create a new account.
  • Logout: Log out of the application.

Structure

Here is the Structure of the note-appπŸ—’οΈ:

elysee_niyibizi@HACKER:~/note-app$ ls
AUTHORS  LICENSE  README.md  Src  requirements.txt  venv
elysee_niyibizi@HACKER:~/note-app$ tree -I venv
.
β”œβ”€β”€ AUTHORS
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ Src
β”‚   β”œβ”€β”€ instance
β”‚   β”‚   └── database.db
β”‚   β”œβ”€β”€ main.py
β”‚   └── website
β”‚       β”œβ”€β”€ __init__.py
β”‚       β”œβ”€β”€ __pycache__
β”‚       β”‚   β”œβ”€β”€ __init__.cpython-312.pyc
β”‚       β”‚   β”œβ”€β”€ __init__.cpython-38.pyc
β”‚       β”‚   β”œβ”€β”€ auth.cpython-312.pyc
β”‚       β”‚   β”œβ”€β”€ auth.cpython-38.pyc
β”‚       β”‚   β”œβ”€β”€ models.cpython-312.pyc
β”‚       β”‚   β”œβ”€β”€ models.cpython-38.pyc
β”‚       β”‚   β”œβ”€β”€ views.cpython-312.pyc
β”‚       β”‚   └── views.cpython-38.pyc
β”‚       β”œβ”€β”€ auth.py
β”‚       β”œβ”€β”€ models.py
β”‚       β”œβ”€β”€ static
β”‚       β”‚   └── index.js
β”‚       β”œβ”€β”€ templates
β”‚       β”‚   β”œβ”€β”€ base.html
β”‚       β”‚   β”œβ”€β”€ home.html
β”‚       β”‚   β”œβ”€β”€ login.html
β”‚       β”‚   └── sign_up.html
β”‚       └── views.py
└── requirements.txt

6 directories, 23 files
elysee_niyibizi@HACKER:~/note-app$

Contributing

Contributions to the Note App project are welcome! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/new-feature).
  3. Make your changes.
  4. Commit your changes (git commit -am 'Add new feature').
  5. Push to the branch (git push origin feature/new-feature).
  6. Create a new Pull Request.

Acknowledgements

I would like to express my gratitude to the following individuals and organizations for their support and guidance throughout my journey in the ALX-Africa Software Engineering programme:

  • My Mentors for their valuable feedback and assistance.
  • My peers in Cohort 13 for their collaboration and camaraderie.
  • ALX Africa: Thank you for providing a transformative software engineering program that has equipped me with the skills and knowledge needed to pursue a career in technology. Your commitment to fostering talent and promoting lifelong learning is truly commendable.
  • Mastercard Foundation: I am immensely grateful for the opportunity to participate in the ALX Africa program, made possible through your generous sponsorship. Your commitment to empowering African youth with the technical skills and resources necessary to thrive in the global workforce is truly inspiring.
  • Fred Swaniker: I extend my sincere appreciation to Fred Swaniker for his visionary leadership and dedication to creating the next generation of African leaders and innovators. His unwavering belief in the potential of African talent has been instrumental in driving positive change and progress across the continent.

A good note-taking system is essential for capturing information @kalibetre✍️. For more info visit πŸ‘‰ LINK ........πŸ˜‰


Author βœ’οΈ

  1. NIYIBIZI ElysΓ©eπŸ‘¨πŸΏβ€πŸ’» | Github | Linkedin | Twitter.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Thank you for visiting my ALX Final Portfolio! If you have any questions or feedback, feel free to reach out. RegardsπŸ™


SupportπŸŽ‰

If you like how I present and document my work do me a favor of giving a Star ✨ to my Repos |&&| a Follow πŸ‘₯

footer