search

IzabellaLopes / kidlit-swap

Project 4 for Code Institute - Diploma in Full Stack Software Development (E-commerce Applications)
1 stars 1 forks source link

readme

KidLit Swap

Home Page

KidLit Swap, derived from Kids' Literature Swap, is a vibrant online community where parents unite to share and exchange children's books.

Originating from conversations among parents at my kids' school, it serves as a virtual clubhouse celebrating the enchantment of storytelling in the digital era. Our initial concept involves gathering every first Saturday of the month at the school to kick off our tradition of swapping children's books. Soon, I plan to introduce a feature where the book's owner will be notified about a loan request and can coordinate a convenient location and time for both parties.

KidLit Swap's purpose is clear – to encourage the sharing and borrowing of kids' literature, fostering a love for reading in young minds. You can share your favorite stories, borrow books from others, and be part of our growing library. It's a fun way to help your kids become great readers.

Join KidLit Swap and let's make reading magical for our little ones!

KidLit Swap Live Page

CONTENTS

Project Goals

The KidLit Swap project was developed with the following goals in mind:

  1. Create Account & Log In: Easily set up an account and log in to access KidLit Swap's vibrant community.

  2. Add Books: Share your favorite children's books by adding them to our virtual library.

  3. Check Book Details: Explore detailed information about each book to find the perfect story for your child.

  4. Borrow Books: Borrow books from other parents, promoting a sense of community and sharing.

  5. Select Return Date: Choose a return date that suits you, making the borrowing process flexible and convenient.

  6. Return Borrowed Books: Easily return the books you've borrowed, ensuring a smooth exchange process.

  7. Log Out: Safely log out when you're done, knowing your account is secure.

KidLit Swap aims to create a welcoming space for parents to share children's books, fostering a love for reading, and simplifying the process of swapping stories to make it both enjoyable and easy.

Back to Contents

User Experience (UX)

Target Audience

KidLit Swap is designed to cater to the following target audience:

User Requeriments and Expectations

User Stories

First Time Visitor Goals

As a first-time visitor to KidLit Swap, I aim to:

Returning Visitor Goals

As a returning visitor to KidLit Swap, I aim to:

Frequent Visitor Goals

As a frequent visitor to KidLit Swap, my goals include:

Scope

KidLit Swap aims to provide an accessible and engaging platform where users can seamlessly explore, share, and connect over a diverse collection of children's books. The development process will be guided by several EPIC stories, each addressing specific aspects of the platform. Key features will include:

  1. EPIC - Mentor Sessions: Code Institute PP4

    • USER STORY: Mentor Session 1: Project Planning #1 - As a Developer I can discuss with my mentor the concept study for my PP4 at Code Institute so that I receive valuable guidance and insights for my project
    • USER STORY: Mentor Session 2: Mid-Point Project Review #3 - As a Developer I can share the progress of my PP4 with my mentor so that I can obtain valuable feedback and guidance for the remaining phases of the project
    • USER STORY: Mentor Session 3: Final Project Review #4 - As a Developer I can showcase the completed project and near-complete documentation so that I can receive valuable mentor feedback

  2. EPIC - Initial Set Up

    • USER STORY: Initial Django Set Up #6 - As a Developer I can set up a new Django project so that I can create the project's structure
    • USER STORY: Connect Database and Cloudinary Storage #7 - As a Developer I can connect the database and media storage so that the user's stored data is managed successfully
    • USER STORY: Initial Heroku Deployment #8 - As a Developer I can perform an early deployment of the application to verify the functionality of the initial set up so that I can continue testing the application as it evolves during development

  3. EPIC: User Experience (UX) Design

    • USER STORY: Implement Responsive Layout #12 - As a Developer I can optimize KidLit Swap's layout for responsiveness so that ensure a seamless and enjoyable browsing experience across diverse devices for users accessing the KidLit Swap website
    • USER STORY: UX/UI Theming and Styling Enhancement #14 - As a Developer I can refine the UX/UI theming and styling of KidLit Swap so that I create an engaging and child-friendly visual experience within the kids' book library

  4. EPIC: Book Management System

    • USER STORY: Add a New Book #16 - As a User / Admin I can add a new book to the system so that I can easily expand the library's collection
    • USER STORY: View a List of All Books #17 - As a User / Admin I can view a list of all books in the system so that I can easily manage and monitor the library's inventory
    • USER STORY: View Book Details #21 - As a User / Admin I can view details of a specific book so that I can get comprehensive information about a particular book
    • USER STORY: Edit Book Details #18 - As a User / Admin I can edit the details of an existing book so that I can keep the information accurate and up-to-date
    • USER STORY: Borrow a Book #19 - As a User / Admin I can mark a book as "Borrowed" and set a return date so that I can facilitate and track book borrowings
    • USER STORY: Mark Book as Returned #20 - As a User / Admin I can mark a borrowed book as "Returned" so that I can update the library's inventory and track book returns

  5. EPIC: User Authentication

    • USER STORY: Log In #23 - As a User I can log in so that I can access personalized features and participate in the KidLit Swap community
    • USER STORY: Log Out #24 - As a User I can log out so that I can secure my account and maintain privacy
    • USER STORY: Sign Up #25 - As a User I can sign up so that I can become a member of the KidLit Swap community and share my love for children's literature
    • USER STORY: Profile Page #31 - As a User I can view and manage my added and borrowed books on my profile page so that I can easily track and organize my book-related activities

  6. EPIC: Documentation

    • Documentation #28 - Comprehensive documentation outlines the essential aspects and purposes of the application
    • Code Documentation #29 - Code documentation of each function/class and module is written for easy legibility/understanding

  7. EPIC: Future Features This milestone centers on the ongoing enhancement and maintenance of KidLit Swap, specifically prioritizing the integration of upcoming features. Some user stories have been excluded from the current project scope due to time constraints and have been labeled as "Won't Have" on the GitHub project board. The intention is to implement these user stories at a later date.

    • USER STORY: Profile Page Edit #26 - As a User I can edit my profile page so that I can update my information and preferences within the KidLit Swap community
    • USER STORY: Account Deletion #27 - As a User I can delete my account so that I can permanently leave the KidLit Swap community if needed

Back to Contents

Design

KidLit Swap's design is intentionally crafted to be simple and clean, ensuring a user-friendly virtual library for sharing children's books and creating an enjoyable experience.

Color Scheme

The color scheme for KidLit Swap features lively shades of green, blue, and red, creating a vibrant and playful atmosphere for the children's literature-sharing website.

In my CSS file, I employed variables to define colors and consistently applied them across the entire stylesheet. It enables easy color updates throughout the website by modifying the color once in the variable, maintaining consistency across the design.

Great care was taken to establish a good contrast between background colors and text at all times to ensure maximum user accessibility, confirmed through the WebAIM Contrast Checker.

The color palette was generated using the Coolors website.

Coolors

Imagery

The images utilized in KidLit Swap were generated by Lexica Art and sourced from Oxford Owl. Additionally, users will be able to upload their own images for their respective books. Moreover, I created the logo using Canva. Credits for the images can be found in the "Credits" section.

Typography

In KidLit Swap, the following fonts, obtained from Google Fonts, were carefully chosen to enhance the overall visual appeal:

Potta One

Shantell Sans

These font choices, with a focus on being kid-friendly and playful, aim to create a visually appealing and enjoyable interface for users engaging with KidLit Swap.

Wireframes

I utilized Balsamiq to design the wireframes for the website.

Home Page - User Not Logged In ![Home Page - User Not Logged In](documentation/wireframes/home.png)
Home Page - User Logged In ![Home Page - User Logged In](documentation/wireframes/home_auth.png)
Book List ![Book List](documentation/wireframes/book_list.png)
Book Details ![Book Details](documentation/wireframes/book_details.png)
My Books ![My Books](documentation/wireframes/my_books.png)
Add Books ![Add Books](documentation/wireframes/add_book.png)
Profile ![Profile](documentation/wireframes/profile.png)
Sign Up ![Sign Up](documentation/wireframes/signup.png)
Log In ![Log In](documentation/wireframes/login.png)


Back to Contents

Agile Methodology

GitHub Projects was utilized to facilitate the development process following an agile methodology. You can refer to the project board through this link.

The 7 Epics mentioned earlier were documented as Milestones within the GitHub project. Each User Story was represented by a GitHub Issue, which was subsequently assigned to a milestone (Epic). Clear acceptance criteria were defined for each User Story to indicate when it is considered complete. Furthermore, these acceptance criteria were detailed into tasks, streamlining the execution of each User Story.

Back to Contents

Data Model

The data model for the KidLit Swap project follows principles of Object-Oriented Programming and leverages Django’s Class-Based Generic Views. Django AllAuth is employed for the user authentication system.

To enable users to contribute to the community, a custom Book model was implemented. Each book entry includes details such as title, author, description, image, and category. The 'added_by' field links to the User model, ensuring that each book has a dedicated owner.

Additionally, the project incorporates features such as borrowing and returning books. The Book model includes fields for 'status,' 'borrower,' and 'return_date,' facilitating a streamlined book borrowing system. Users can view their borrowed books and manage their book inventory through dedicated views.

The database schema is structured to provide a robust foundation for the KidLit Swap platform:

Database Schema

Back to Contents

Security Features and Defensive Design

In the KidLit Swap project, robust user authentication and security features have been implemented to ensure a secure and reliable user experience.

User Authentication

In KidLit Swap, I've implemented robust security measures for user authentication.

Form Validation

I've implemented thorough form validation mechanisms to enhance data integrity.

Database Security

My approach to database security prioritizes confidentiality and protection against unauthorized access.

Cross-Site Request Forgery (CSRF) Protection

KidLit Swap employs CSRF tokens on all forms throughout the site, providing an additional layer of defense against cross-site request forgery attacks.

Custom Error Pages

Custom Error Pages were created to give the user more information on the error and to provide them with buttons to guide them back to the site.

Back to Contents

Features

Existing Features

Favicon

The website features a favicon that is visible in the browser tab.

Favicon

Header

Logo

Logo

Navigation Bar

Footer

Footer

Home Page

Hero Call-to-Action section

The home page features a hero call-to-action with the title 'KidLit Swap: Exchange the Magic of Kids' Literature' and an animated jumping image.

Hero

Hero_auth

About section

The 'About' section provides a concise overview of the site's offerings, summarizing key features through three simple steps accompanied by Font Awesome icons.

About

User Account Pages

Sign Up

Sign up

Log In

Log in

Log Out

Log out

Book List

Book List

Book Details

Category

Category Books

Manage Books | My Books

Manage Books | Borrowed Books

Manage Books | Add Book

Profile

The profile page consists of three sections:

Error Pages

As mentioned earlier, Custom Error Pages were designed to offer users additional information about the error and provide them with buttons for navigating back to the site.

Future Implementations

As mentioned earlier in EPIC: Future Features, certain user stories have been omitted from the current project due to time constraints. They are marked as "Won't Have" on the GitHub project board with plans for future implementation.

In addition to the user stories outlined in the "Future Features," I also plan to implement two additional features in the future:

  1. Develop an alert system to notify the owner of a book (added by) when someone requests to borrow the book and suggest a loan date. This way, the owner can approve or reject the loan, provide details about the book's pickup location, and the response will be sent back to the logged-in user.

  2. Create a search bar to allow users to easily locate a book in the Book List.

Back to Contents

Technologies Used

Languages Used

Frameworks - Libraries - Programs Used

Back to Contents

Testing

Please refer to TESTING.md file for a comprehensive overview of all conducted testing procedures.

Back to Contents

Deployment

The website has been successfully deployed on Heroku. You can access the live site here.

Code Institute Template

To create a terminal-based user interface using the Code Institute Template:

  1. Go to the Code Institute Full Template and click on "Use this template."
  2. Choose "Create a new repository."

Deployment process

  1. GitHub Setup

    • Log in to Github.
    • Access the repository for deployment. The repository for the website can be found here.

  2. Heroku Setup

    • Log in to Heroku.
    • Click the "New" button located in the top right corner..
    • Select "Create New App."
    • Provide a name for the app (kidlit-swap) and choose a region (Europe).
    • Click the "Create app" button.
    • Navigate to the "Deploy" section in the navigation bar. Under "Deployment Method," choose GitHub/Connect to GitHub.
    • In the "Connect to GitHub" section, enter the repository name (kidlit-swap) and click the search button.
    • Upon the repository link appearing in the search results, click the "Connect" button. App information

  3. Attach the Postgres database:

    • In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.
    • Copy the DATABASE_URL located in Config Vars in the Settings Tab.

  4. Prepare the environment and settings.py file:

    • In your GitPod workspace, create an env.py file in the main directory.
    • Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
    • Update the settings.py file to import the env.py file and add the SECRETKEY and DATABASE_URL file paths.
    • Comment out the default database configuration.
    • Save files and make migrations.
    • Add Cloudinary URL to env.py
    • Add the Cloudinary libraries to the list of installed apps.
    • Add the STATIC files settings - the url, storage path, directory path, root path, media url and default file storage path.
    • Link the file to the templates directory in Heroku.
    • Change the templates directory to TEMPLATES_DIR.
    • Add Heroku to the ALLOWED_HOSTS list the format ['app_name.heroku.com', 'localhost'].

  5. Create files / directories

    • Create requirements.txt file
    • Create three directories in the main directory; media, storage and templates.
    • Create a file named "Procfile" in the main directory and add the following: web: gunicorn project-name.wsgi

  6. Update Heroku Config Vars Add the following Config Vars in Heroku:

    • SECRET_KEY value
    • CLOUDINARY_URL
    • PORT = 8000
    • DISABLE_COLLECTSTATIC = 1

  7. Deploy

    • NB: Ensure in Django settings, DEBUG is False
    • Go to the deploy tab on Heroku and connect to GitHub, then to the required repository.
    • Scroll to the bottom of the deploy page and either click Enable Automatic Deploys for automatic deploys or Deploy Branch to deploy manually. Manually deployed branches will need re-deploying each time the repo is updated.
    • Click View to view the deployed site.

The site is now live and operational.

Local Development

How to Fork

To fork the repository:

  1. Login (or signup) to GitHub account.
  2. Go to the repository for this project, IzabellaLopes/kidlit-swap.
  3. Click the Fork button in the top right corner.
  4. Edit the repository name and description if desired
  5. Click the green create fork button

How to Clone

To clone the repository:

  1. Login (or signup) to GitHub account.
  2. Go to the repository for this project, IzabellaLopes/kidlit-swap.
  3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
  4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
  5. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

Back to Contents

Credits

Code

Content

Media

Back to Contents

Acknowledgments

I would like to express my gratitude to the following individuals who played significant roles in the successful completion of my fourth project:

Back to Contents