Too overwhelmed of Notion? Let “NoteApp” take the throne

As everyone knows, the brain is not an infinite container which will stack up new information like a Jenga. It has its own limitations such as limited retention power, bad at multitasking and remembering too old information if not revised time to time.

Since, we are experiencing mass ‘brain fog’ due to evolution of technologies that were supposed to make us at ease, are the reason why so many of us are experiencing this. A lot has changed after the inclusion of technology almost everywhere all around us and that has also affected the way we remember things now.

Think about this, how many times you’ve tried remembering important things in your brain and didn’t forget a single task? I guess once or maybe twice and that too a long time ago not recently. (I’m guessing it and I could be wrong as I can’t read minds yet)

So to make our lives a little easier, we write down things either on paper or on a device. But you see people choose what’s easier so that they will be reminded of tasks at their comfort level. Nowadays, almost everyone has access to mobile devices regardless of age and to note down tasks, this seems like a better option instead of physically finding paper and writing down tasks for ourselves.

— This is where note-taking apps come at notice. Since most of our work is done digitally, this time CakePops, built an web application called “NoteApp” which is a note-taking app and anyone can use this to write down anything they wish. Our application opens with a login/signup page where you are supposed to fill in the required fields before using the application for the utmost privacy and security of your confidential information.

We kept a simple UI[ User Interface] for NoteApp as for us UX [ User Experience] plays a more important role than visuals. Also, it is made keeping ‘easy-to-understand’ UX for people of all ages.

<The Technological Stacks>

: Python Library ‘Flask’

— It is lightweight, open-source web framework written in Python that is helpful in building web applications and APIs quickly and efficiently.

— Called as ‘microframework’ as it does not require particular tools, data abstraction layers, or third-party libraries to function which makes it a preferable option.

— ‘Flask-Login’ extension is used for secure user login and authorization features as can be seen of our application’s homepage. Also, it uses sessions for authentication.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from os import path
from flask_login import LoginManager

from flask import Blueprint, render_template, request, flash, redirect, url_for
from .model import User
from werkzeug.security import generate_password_hash, check_password_hash
from . import db   #means from __init__.py import db
from flask_login import login_user, login_required, logout_user, current_user

: HTML(Hyper Text Markup Language)

— This was used to build the foundation and the whole structure of web application was coded in HTML.

: Bootstrap CSS (Cascading Style Sheets)

— For the styling, we used Bootstrap CSS for visualization of the theme we wanted for the application.

— Included animations like color change on hovering on the login button.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #e0e0e0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

: JavaScript (JS)

— It is a dynamically typed and interpreted language as compare to Java.

— Here, in our application, the users performing actions such as interacting with elements on our page, filling out forms are done on the client side. But, on the server side, JS is used to access databases involved, file handling, and security purposes.

//=====CORE FUNCTIONS (from index.js)=====
function deleteNote(noteId) {
    fetch("/delete-note", {
        method: "POST",
        body: JSON.stringify({ noteId: noteId }),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then((_res) => {
        window.location.href = "/";
    });
}

after successfully writing down code for all of our files, we deployed our application using Render this time.

Now, what’s is Render??

A render is a cloud hosting platform that can be used to deploy websites and apps without managing complex servers. Well, it can do more than just deploying like building and scaling websites but we used it for deploying.

— Render is like AWS as they both host and run web applications, but Render is a “Platform-as-a-Service” (PaaS) that runs on top of AWS. While AWS gives you hundreds of raw building blocks requiring complex configuration, Render automates the setup so you can deploy code directly from GitHub.

— Using Render is incredibly simple. You connect your Git repository, and it handles the servers, scaling, and SSL certificates automatically.

Homepage of NoteApp

at last, while collectively working on this project, it was our curiosity and interest that lead us to learn a lot of concepts that were new to us such as getting to know Render cloud service.

We, as a team, wish that NoteApp will be able to ease out your chaotic everyday life and hope it will make a great change:)