Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/codeverdotdev/codever

Bookmarks, Snippets and Notes Manager for Developers & Co (website)
https://github.com/codeverdotdev/codever

angular api bookmark bookmark-manager bookmarklet bookmarks bookmarks-manager developer-tools docker expressjs keycloak markdown mongodb mongoose nodejs notes productivity snippets website

Last synced: 2 days ago
JSON representation

Bookmarks, Snippets and Notes Manager for Developers & Co (website)

Host: GitHub
URL: https://github.com/codeverdotdev/codever
Owner: CodeverDotDev
License: mit
Created: 2016-10-02T04:42:20.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2024-08-30T12:38:43.000Z (5 months ago)
Last Synced: 2024-10-29T17:11:42.582Z (3 months ago)
Topics: angular, api, bookmark, bookmark-manager, bookmarklet, bookmarks, bookmarks-manager, developer-tools, docker, expressjs, keycloak, markdown, mongodb, mongoose, nodejs, notes, productivity, snippets, website
Language: TypeScript
Homepage: https://www.codever.dev
Size: 61.8 MB
Stars: 364
Watchers: 16
Forks: 58
Open Issues: 61
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

        


	





     ⚡🔖️ Bookmarks and snippets manager for developers & co 🔖⚡️ 






:point_right: Use our [**HowTo pages**](https://www.codever.dev/howto)

 to get you going and [start saving time and nerves](https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae) when managing

your bookmarks and code snippets. The following helpers and extensions will assist you along the way:

## Extensions

| [![Bookmarklet](documentation/img/bookmark-24.png)](https://www.codever.dev/howto/bookmarklets) | [![Chrome](documentation/img/chrome-24.png)](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) | [![Firefox](documentation/img/fx-24.png)](https://addons.mozilla.org/addon/codever/) | [![IntelliJ Plugin](documentation/img/intellij-24.png)](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) | [![VSCode extension](documentation/img/vscode-24.png)](https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever) |

|:---:|:---:|:---:|:---:|:---:|

| [Bookmarklet](https://www.codever.dev/howto/bookmarklets) |  [Chromium Extension](https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb) |  [Firefox Addon](https://addons.mozilla.org/addon/codever/) | [IntelliJ Plugin](https://plugins.jetbrains.com/plugin/14456-codever-snippets/) | [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=codever.vscode-codever) |

    

### Chrome extension usage example - save snippet

 

 ![Save to Codever chrome extension usage](documentation/gif/codever-browser-extension-save-snippet-800x454.gif)

 

> The other extensions function more or less after the same principle

## Public bookmarks

*******************************************************************************************************************************

Worthy public bookmarks are published regularly on Github at [CodeverDotDev/bookmarks](https://github.com/CodeverDotDev/bookmarks).

*******************************************************************************************************************************

## Setup (development or self hosting)

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

The project is developed with the MEAN stack and [Keycloak](http://www.keycloak.org/) for authentication and authorization:

![components-graph](documentation/graphviz/components-graph.png)

The project contains two apps

* [codever-ui](apps/codever-ui) which makes up the User Interface. This uses with Angular and Angular CLI.

* [codever-api](apps/codever-api) which is the API supporting the UI. It uses ExpressJS with MongoDB and Keycloak. See the [OpenAPI specification](https://www.codever.dev/api/docs)

### Prerequisites

What you need to run this app:

* `node` and `npm` (we recommend using [NVM](https://github.com/creationix/nvm))

  * Ensure you're running Node at least (`v16.x.x`+) and NPM (`8.x.x`+)

* [nodemon](https://nodemon.io/) - `npm install -g nodemon`

* **Docker** - we recommend using [Docker Desktop](https://www.docker.com/products/docker-desktop)

> Docker and Docker-compose are currently used only for local development

### Installing (**development setup**)

#### Start MongoDB and Keycloak server

:warning:   When you run `docker compose` for the **first time** uncomment the following `-Dkeycloak.migration.action=import` line :

```yaml

    #command: -Dkeycloak.migration.action=import -Dkeycloak.migration.provider=dir -Dkeycloak.migration.dir=/tmp/keycloak/export-import -Dkeycloak.migration.strategy=IGNORE_EXISTING

```

in the [docker-compose](docker-compose.yml) file, **so that the initial Keycloak setup (realm and users) is loaded**.

> :warning:   For further startups of docker-compose you should **comment back this line**, as it starts faster

```bash

docker-compose up

```

> Use `-d` to run it in the background

#### Install and run (frontend & backend)

You want to have the backend API running first with the following commands:

```shell

# install

nvm use   #only if you are using nvm

npm install

# run

npm run frontend #to run the frontend

npm run backend #to run the backend

#alternatively run in parallel

npm start

```

or in one line `nvm use; npm install; npm start`

This starts

* the API with [nodemon](http://nodemon.io) at [http://localhost:3000/api](http://localhost:3000/api)

 and will watch for code changes in backend and automatically redeploy.

* the frontend available at [http://localhost:4200](http://localhost:4200). Login the user/password **`mock/mock`** configured

  for you in the initial Keycloak setup. Some bookmarks are initially loaded with your account, so you can start playing with them.

> You can create your own test user, or any other extra users by following the screenshots in

> [Add a Keycloak user](documentation/keycloak/add-keycloak-user.md) to create it.

> To be able to automatically add youtube videos published date and duration to the title you need to 

> create a _nodemon.json_ file based on the [backend/nodemon.json.example](apps/codever-api/nodemon.json.example) 

> and add your own youtube api key

### Keycloak

Keycloak Admin console reachable at [http://localhost:8080/auth](http://localhost:8080/auth) with the user/password **`admin/Pa55w0rd`** 

(see docker compose file)

## Testing

### E2E (integration) tests with Cypress

> Keycloak and mongodb have to be started as specified above (`docker-compose up` command)

Run the integration test by issuing the following command.

```bash

cd apps/codever-ui

npm run cy:run

```

> To open Cypress you can run the following task `npm run cy:open`

### API (backend)

### Integration tests

> Keycloak and mongodb have to be started as specified above (`docker-compose up` command)

Run the integration test by issuing the following command.

```bash

cd apps/codever-api

npm run integration-tests

```

A report will be generated.

## Debugging

### UI (Frontend)

#### Dev Tools in Chromium browsers

You can use the Dev Tools in Chromium based browsers (e.g. Chrome, Brave). Navigate to **Sources**

and the file you want to set your break points, like in the following example:

![chrome-dev-tools-debugging](documentation/debugging/frontend/debug-frontend-chrome-dev-tools-800x574.png)

#### IntelliJ

In IntelliJ you add Javascript Debug configuration as shown below:

![Intelli-frontend-debugging](documentation/debugging/frontend/debug-frontend-intellij.png)

### Backend

#### IntelliJ / Webstorm (Node.js plugin is required)

The `npm run debug` starts nodemon with the `--inspect` parameter so you can attach to this process,

by using the following configuration:

![nodejs-remote-debugging](documentation/debugging/backend/attach-to-nodemon-process.png)

#### Visual Studio Code

See [Node.js debugging in VS Code with Nodemon](https://github.com/microsoft/vscode-recipes/tree/master/nodemon)

## Blog

Blog posts related to Codever features and implementation details can be found on [Codepedia.org](https://www.codepedia.org/tags/#codever)

and [Dev.to](https://dev.to/codever)

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/CodeverDotDev/codever/tags).

## Changelog

The changelog is available in [CHANGELOG.md](CHANGELOG.md)

To update the changelog execute the following commands:

```shell

nvm use

standard-changelog

```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

> All media materials used in the project fall under the copyright law