Skip to content

full-stack-easy.md

Latest commit

 

History

History
130 lines (109 loc) · 5.3 KB

full-stack-easy.md

File metadata and controls

130 lines (109 loc) · 5.3 KB

Software Development - Beginner Difficulty

Project Title: Simple Personal Note-Taking Application

Premise:

Create a full-stack personal note-taking application that allows users to register, log in, and manage their notes. The application should be straightforward and user-friendly, enabling users to create, view, edit, and delete their notes securely. This project is designed to help you understand the basics of full-stack development, including user authentication and CRUD operations.

General Requirements:

Front-End:

  • User Interface (UI):
    • Authentication Pages:
      • Sign-Up Page:
        • Users can register with a username and password.
        • Basic validation for input fields (e.g., required fields, password strength).
      • Login Page:
        • Users can log in using their registered credentials.
      • Logout Functionality:
        • Users can securely log out of the application.
    • Notes Dashboard:
      • Notes List:
        • Display a list of all notes created by the logged-in user.
        • Each note shows the title and a snippet of the content.
      • Create Note:
        • A form to create a new note with a title and content.
      • Edit Note:
        • Ability to edit the title and content of an existing note.
      • Delete Note:
        • Option to delete a note with a confirmation prompt.
    • Responsive Design:
      • Ensure the application is usable on both desktop and mobile devices.
    • Styling:
      • Use simple and clean styling to enhance user experience.
      • Optionally, use a CSS framework like Bootstrap or Materialize for faster development.

Back-End:

  • APIs and Endpoints:
    • Authentication API:
      • POST /register: Register a new user.
      • POST /login: Authenticate a user and provide a session or token.
      • POST /logout: End the user's session.
    • Notes API:
      • GET /notes: Retrieve all notes for the authenticated user.
      • POST /notes: Create a new note.
      • PUT /notes/{id}: Update an existing note.
      • DELETE /notes/{id}: Delete a note.
  • Database:
    • Entities:
      • Users:
        • UserID (unique identifier)
        • Username
        • PasswordHash
      • Notes:
        • NoteID (unique identifier)
        • UserID (foreign key linking to Users)
        • Title
        • Content
        • CreatedAt
        • UpdatedAt
    • Relationships:
      • Each user can have multiple notes.
  • Security:
    • Authentication:
      • Secure password storage using hashing (e.g., bcrypt).
      • Implement session management or token-based authentication (e.g., JWT).
    • Authorization:
      • Ensure users can only access their own notes.
    • Input Validation:
      • Validate and sanitize all user inputs to prevent security vulnerabilities like SQL injection and XSS attacks.

Additional Features (Optional):

  • Search Functionality:
    • Allow users to search their notes by title or content keywords.
  • Note Sorting and Filtering:
    • Sort notes by date created or title.
  • Rich Text Editor:
    • Enhance the note editor to support basic text formatting (bold, italic, underline).
  • Dark Mode:
    • Provide an option to switch between light and dark themes.
  • Deployment:
    • Deploy the application on a platform like Heroku, Vercel, or Netlify.
    • Provide documentation on how to set up and run the application.

Constraints and Guidelines:

  • Programming Language Agnostic Back-End:
    • You can use any back-end language and framework you are comfortable with (e.g., Node.js with Express, Python with Flask or Django, Java with Spring Boot).
  • Front-End Framework (Optional):
    • You may use plain HTML, CSS, and JavaScript or a front-end framework/library like React, Vue.js, or Angular.
  • Development Practices:
    • Use version control (e.g., Git) to track your changes.
    • Write clean, readable, and well-documented code.
    • Structure your project directories logically.
  • Testing (Optional):
    • Write basic tests for your back-end APIs and front-end components.
  • Error Handling:
    • Implement proper error messages and user feedback for failed operations (e.g., failed login, validation errors).

Project Goals:

  • Easy Difficulty:
    • This project is suitable for beginners who are still new to full-stack development.
  • Learning Outcomes:
    • Understand how to set up a basic front-end connected to a back-end server.
    • Learn how to implement user authentication and authorization.
    • Perform CRUD (Create, Read, Update, Delete) operations on data.
    • Manage state and data flow between the front-end and back-end.
  • Extensibility:
    • The application serves as a foundation that can be expanded with more advanced features as your skills grow.

By completing this project, you will:

  • Gain practical experience in building a simple but functional full-stack application.
  • Learn how to connect the front-end with back-end APIs.
  • Understand the basics of user authentication and secure password handling.
  • Practice handling data persistence with a database.