Green Notes

Table of Contents

• Overview

• Features

• Project Structure

  • Project Index

• Getting Started

  • Prerequisites
  • Installation
  • Usage
  • Testing

• Project Roadmap

• Contributing

• License

• Acknowledgments

---

Overview

This is a project where I made a full-stack note-taking application. Currently, the project is not online as there are some security issues I would need to extensively take care of. Primarily, detering HTML injection, and XSS attacks, which I am unfamilar with at the moment. (I will to try to find a library to help with this in the future).

Disclaimer: The backend requires a cert and key to be generated for it to function properly. The .env in the backennd also needs to be filled out properly as well.

---

Features

A full stack application will secure sign up and login page, session cookies, the ability to delete, update or change emails or passwords securely, and a bunch more. The site has multiple pages (8~ + any pages you create for note taking). In the backend, it supports around 20~ routes that allow users to permanently store or delete their notes

---

Project Structure

└── Note-taking_app_green_notes_fullstack.git/
    ├── README.md
    ├── green_notes_2
    │   ├── .eslintrc.cjs
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── postcss.config.js
    │   ├── public
    │   ├── src
    │   ├── tailwind.config.js
    │   ├── tsconfig.json
    │   ├── tsconfig.node.json
    │   └── vite.config.ts
    └── green_notes_backend
        ├── .gitignore
        ├── Makefile
        ├── README.md
        ├── go.mod
        ├── go.sum
        ├── main.go
        ├── qodana.yaml
        ├── requests
        ├── security
        └── types

Project Index

NOTE-TAKING_APP_GREEN_NOTES_FULLSTACK.GIT/

__root__

green_notes_backend

go.mod	❯ REPLACE-ME
Makefile	❯ REPLACE-ME
go.sum	❯ REPLACE-ME
qodana.yaml	❯ REPLACE-ME
main.go	❯ REPLACE-ME

types

type.go

❯ REPLACE-ME

security

cookies.go

❯ REPLACE-ME

requests

database.go	❯ REPLACE-ME
DatabasePool.go	❯ REPLACE-ME
requests.go	❯ REPLACE-ME

green_notes_2

tsconfig.node.json	❯ REPLACE-ME
index.html	❯ REPLACE-ME
tailwind.config.js	❯ REPLACE-ME
.eslintrc.cjs	❯ REPLACE-ME
package-lock.json	❯ REPLACE-ME
package.json	❯ REPLACE-ME
tsconfig.json	❯ REPLACE-ME
vite.config.ts	❯ REPLACE-ME
postcss.config.js	❯ REPLACE-ME

src

App.tsx	❯ REPLACE-ME
main.tsx	❯ REPLACE-ME
vite-env.d.ts	❯ REPLACE-ME

layout

RootLayout.tsx

❯ REPLACE-ME

style

App.css	❯ REPLACE-ME
index.css	❯ REPLACE-ME

general

types

UserInfo.enum.ts	❯ REPLACE-ME
UserInfo.interface.ts	❯ REPLACE-ME
UserLogin.interface.ts	❯ REPLACE-ME
UserLogin.enum.ts	❯ REPLACE-ME

lotties

loading.json

❯ REPLACE-ME

general_components

Navbar.tsx	❯ REPLACE-ME
ErrorPage.tsx	❯ REPLACE-ME
Loading.tsx	❯ REPLACE-ME

hooks

auth.hook.tsx

❯ REPLACE-ME

api

getCookie.ts

❯ REPLACE-ME

helper

string.ts	❯ REPLACE-ME
cookies.ts	❯ REPLACE-ME

pages

home

Home.tsx	❯ REPLACE-ME
homepage.css	❯ REPLACE-ME

sign-up

SignUp.tsx

❯ REPLACE-ME

components

SignUpForm.tsx	❯ REPLACE-ME
SignUpFields.tsx	❯ REPLACE-ME

old_notes

notes.css	❯ REPLACE-ME
NoteApp.tsx	❯ REPLACE-ME

components

Note.tsx	❯ REPLACE-ME
NotesList.tsx	❯ REPLACE-ME
search.tsx	❯ REPLACE-ME
AddNote.tsx	❯ REPLACE-ME
Header.tsx	❯ REPLACE-ME

about

aboutpage.css	❯ REPLACE-ME
About.tsx	❯ REPLACE-ME

components

AboutMore.tsx	❯ REPLACE-ME
AboutExplain.tsx	❯ REPLACE-ME

dashboard

UserMainPage.tsx

❯ REPLACE-ME

inner-pages

Settings.tsx	❯ REPLACE-ME
Dashboard.tsx	❯ REPLACE-ME
Notes.tsx	❯ REPLACE-ME
Profile.tsx	❯ REPLACE-ME
ANote.tsx	❯ REPLACE-ME

components

DashboardNavbar.tsx	❯ REPLACE-ME
Stats.tsx	❯ REPLACE-ME

new-password

NewPassword.tsx

❯ REPLACE-ME

forget-password

ForgotPassword.tsx

❯ REPLACE-ME

login

Login.tsx

❯ REPLACE-ME

---

Getting Started

Prerequisites

Each npm and go command must be run in their respective repo (npm -> gren_notes_2) and (go -> green_notes_backend)

Before getting started with Note-taking_app_green_notes_fullstack.git, ensure your runtime environment meets the following requirements:

• Programming Language: TypeScript
• Package Manager: Go modules, Npm

Installation

Install Note-taking_app_green_notes_fullstack.git using one of the following methods:

Build from source:

1. Clone the Note-taking_app_green_notes_fullstack.git repository:

❯ git clone https://github.com/DanielCoder834/Note-taking_app_green_notes_fullstack.git

2. Navigate to the project directory:

❯ cd Note-taking_app_green_notes_fullstack.git

3. Install the project dependencies:

Using go modules  

go to the installation page for go

go get -u -v -f all

Using npm  

❯ npm install

Usage

Run Note-taking_app_green_notes_fullstack.git using the following command: Using go modules  

❯ go run .

Using npm  

❯ npm start

Testing (Not yet Implemented)

Run the test suite using the following command: Using go modules  

❯ go test

Using npm  

❯ npm test

---

Project Roadmap

• Task 1: Implement SQL Injection Prevention
• Task 2: Making a better UI for the note taking portion.
• Task 3: Allow the storing of different HTML tags on the backend for saved styling.

---

Contributing

• 🐛 Report Issues: Submit bugs found or log feature requests for the Note-taking_app_green_notes_fullstack.git project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

git clone https://github.com/DanielCoder834/Note-taking_app_green_notes_fullstack.git

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

---

License

This project is protected under the MIT License License. For more details, refer to the LICENSE file.

---

Acknowledgments

• List for any resources, contributors, inspiration, etc. here.

---

• I used Go's pgx library, which had an awesome community for getting help for their Postgres Driver :)