Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redakker/articles
Articles frontend
https://github.com/redakker/articles
Last synced: 27 days ago
JSON representation
Articles frontend
- Host: GitHub
- URL: https://github.com/redakker/articles
- Owner: redakker
- Created: 2022-02-06T14:34:33.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-13T16:41:11.000Z (almost 3 years ago)
- Last Synced: 2024-10-15T03:27:18.156Z (2 months ago)
- Language: TypeScript
- Size: 915 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Articles
This project is a frontend for an article server. The software displays the articles of the users who were previously signed up to the system.
The registration is easy and free. Articles can be published right after registration.## Features
### Visitors
- the web fronted lists the articles which are available on the server-side. The main page shows them in cards which contains the article picture (autogenerated from the title), the description and the author name.
- use mouse over on the name of the author, to get more details about him/her
- the chosen article can be opened with the button on the card. In this case, the whole article is displayed with the autogenerated picture and the tags as well.
- articles are read-only for visitors, non-registered users and not logged in users
### Registered authors
- user registration is possible for anyone with giving just a few data: username, e-mail address and password. Usernames and e-mail addresses are unique in the system, users cannot have a double registration for same username and/or e-mail address
- users can edit their own profiles after the successful login. They cannot modify the registered username and e-mail address, however they can have additional data like biography and profile picture. Profile picture should be hosted on an external server, system stores the URL of the picture only.
- users can create and edit their articles under the `Articles` menu. They can define the title, description and the body of the article. Articles' picture is autogenerated from the first word of the title and modification date is stored at saving time.
- to make the website and the article SEO friendly, tags can be defined for articles on the same form where the article can be edited. Currently, the amount of the tags could be 5 for each article.### User administration
- user administration is also available for signed up users.
- users can delete other users from the system and modify their own profile. Be aware if a user has been deleted then all user related articles will be deleted as well.
- user administration is still rudimental, please read the feature ideas in the TODO sectionAfter a successful build you can reach the application in your favorite browser on this URL: `http://localhost:4200/`
See below how to start the application.# Development
The project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2.## Compile and run the code
- download the code from this repository
- download and install, the latest Node.js. https://nodejs.org/en/download/
- run `npm i` to install the related libaries and dependencies in the folder of the code.
- run `npm start` or `ng serve` to start the application in development mode.
- run `ng serve --prod' to start in production mode (currently no diference between two modes)
- it may require to modify some configuration data (for example server URL) in the file `app.constants.ts`**Important**
To have some initial data please add the `sqlite` database to your server application. You can find it in the `test_database` folder
It has two test users as well:
- family at guy dot com / family
- redman at redman dot hu / pass1The web interface of the application is reachable on this URL: `http://localhost:4200/`
## Running unit tests
Run `ng test` to execute the unit tests.
# TODO
## Possible features
- use NgRx Store for better data handling in client-side
- introduce user levels for better user handling. Currently, new registered users can delete others without any restriction
- create an endpoint on server-side which allows getting the articles by the user (or any filter). Currently, all articles should be retreived from the server and should filter in client side. Add filter to the server side would be save network bandwith and increase the performance. Especially in case of lot of articles.
- server should not allow modifying articles by other users. Currently, client side prevents this action. The user level introduction is the prerquisite of this feature## Known issues
- unify data objects: the data structure of the server side objects are different in case of different endpoints. Sometimes the object is sent out `{ username: string }` sometimes in another format: `user: { username: string }`
- unify error message: same as at the previous point. Server should send an error message in a unified format which fits to a client side object. See the `ServerMessage` object in the client-side
- user modification endpoint can modify the username/e-mail to an existing one without any error message and prevention. Currently client prevents this action without sending any username/email at modifitation time.
- allow to modify password for user in the endpoint. Currently the exact sent string is written into the database. Server-side does not encrypt it. In this case the login will be never success after the password modification.
- Articles endpoint should not send the "articlesCount", it can get from the article array easily. Article endpoint should send a simple article array. It could decrease the data size and mitigate the network traffic
- article cards have display issues in 850-1000px with resolution