Coder Social home page Coder Social logo

elyse502 / note-app Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 49 KB

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

License: MIT License

Python 56.31% JavaScript 3.40% HTML 40.29%
bootstrap css flask git html jquery oop-principles javascript python sqlite

note-app's Introduction

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

note-app's People

Contributors

elyse502 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.