https://github.com/jhwa426/url-bookmark-manager
The URL Bookmark Manager application is to save URLs to local storage without connecting to a database
https://github.com/jhwa426/url-bookmark-manager
angular javascript typescript
Last synced: 3 months ago
JSON representation
The URL Bookmark Manager application is to save URLs to local storage without connecting to a database
- Host: GitHub
- URL: https://github.com/jhwa426/url-bookmark-manager
- Owner: jhwa426
- Created: 2024-09-18T21:28:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-17T02:07:21.000Z (over 1 year ago)
- Last Synced: 2025-03-17T10:13:01.306Z (over 1 year ago)
- Topics: angular, javascript, typescript
- Language: TypeScript
- Homepage: https://url-bookmark-manager.netlify.app/
- Size: 1.07 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## URL Bookmark Manager
The aim of the URL Bookmark Manager application is to save URLs to local storage without connecting to a database. The URLs persist when the page is reloaded, and users can edit and delete them. Additionally, users can delete all URLs with the clear button.
## [URL Bookmark Manager](https://url-bookmark-manager-js.netlify.app/) - JavaScript
## [URL Bookmark Manager](https://url-bookmark-manager-ts.netlify.app/) - TypeScript
## [URL Bookmark Manager](https://url-bookmark-manager.netlify.app/) - Angular
### Features
#### Overview Page
Form Submission: The top section of the Overview Page features a form that allows users to submit a link. This form is designed to validate the input, ensuring that the submitted link is a valid URL and exists.
URL Bookmark List Display: Below the form, the page displays a list of submitted links. The list is paginated, showing 20 links per page.
Pagination Controls: The pagination includes numbered controls with “next” and “previous” links, allowing users to navigate through the pages (e.g., < 1 2 3 >).
Custom Form Validation: The form validation logic is custom-written by Regular Expression to ensure robust URL validation.
#### Results Page
Submission Acknowledgement: The Result Page contains a message thanking the user for their submission.
Display Submission: The user's submitted link is also displayed.
Navigation Link: The button is provided to navigate back to the Overview Page.
## Technical Skills 💻
### Installation Angular
To run this application locally, follow these steps:
1. Clone the repository: `git clone https://https://github.com/jhwa426/url-bookmark-manager/`
2. Navigate to the project directory: `cd bookmark-manager-angular`
3. Install the dependencies: `npm install`
4. Start the development server: `ng serve`
5. This will start the application on `http://localhost:4200/`. Open your web browser and navigate to this address to view the app.
### Installation TypeScript
To run this application locally, follow these steps:
1. Clone the repository: `git clone https://https://github.com/jhwa426/url-bookmark-manager`
2. Navigate to the project directory: `cd bookmark-manager-ts`
3. Install the dependencies: `npm init -y`
4. Install the TypeScript `npm i --save-dev typescript`
5. Create the `tsconfig.json` with command `npx tsc --init`
6. Modify `tsconfig.json` file as searching "outDir" and uncommenting to "outDir": "./dist".
7. Modify `package.json` file that "start": "tsc --watch"
8. Start the development server: `npm start`