The Angular Headless Hashnode Project aims to seamlessly connect your Angular application to the Hashnode GraphQL database, providing a template for integrating Angular with a headless Hashnode setup.
In other words - this project is very much like the starter kit that Hashnode provides, except that this project uses Angular for the frontend and deployment is set to be done through Netlify.
- Develop a flexible template for Angular integration with headless Hashnode.
- Connect the Angular app to Hashnode's GraphQL database to retrieve posts and blog data.
- Responsive layout improvements for different devices
- Support Angular v17 and up
- Appolo Angular - GraphQL Client for Angular
- Font Awesome Icons
- Google Material Symbols and Icons
- Google Fonts
 |
 |
|---|
You can see the live versions on the DEMO SITE
angular-v17 - has no UI libraries LIVE
angular-v17-modMAT - modules and Angular Material LIVE
angular-v17-AnguMAT - has Angular Material LIVE
angular-v17-PrimeNG - has PrimeNG LIVE
Most of the open issues feature engaging YouTube videos, providing step-by-step guidance on implementing requirements. Dive in and contribute without hesitation – your skills are valued, and you can make a meaningful impact! Join us in building something great together.🌟
- Fork the
monacodelisa/angular-headles-hashnopderepo.
-
In your local or forked repository, make your changes in a new git branch:
git checkout -b my-fix-branch develop
-
Create your patch, including appropriate test cases.
-
This is a monorepo that includes 6 versions of the app, make sure that you are working on the correct app version.
-
Follow our Coding Rules.
-
Run the full test suite, as described in the developer documentation, and ensure that all tests pass.
-
Commit your changes using a descriptive commit message as specified in CONTRIBUTING.md.
git commit --all
Note: the optional commit
--allcommand line option will automatically "add" and "rm" edited files. -
Push your branch to GitHub:
git push origin my-fix-branch
-
In GitHub, send a pull request to
angular-headless-hashnode:develop.
This app is still in its early stages, and it currently has limited features. At this point, I strongly encourage you to contribute to its development before actively using the app.
-
Fork the
monacodelisa/angular-headles-hashnopderepo. -
Go to the
angular-v16app and inside thegraphql.operations.tsfile, replace the URL of the blog to point to your blog -
Right now only
angular-v16can be deployed to Netlify so you just need to select it and deploy from an existing github repo. (Your forked repo)
Be advised that a lot of features are yet to be implemented.
- Clone this repository.
git clone https://github.com/your-username/angular-headless-hashnode.git
cd angular-headless-hashnode- Select one of the available app versions
cd <chosen-app-version>
- Install dependencies.
npm install
- Run the app
npm start
or
ng serve
If you've added exciting features or functionalities that the project currently lacks, we'd love to see what you've accomplished. Share your contributions, suggestions, or improvements to help enhance the overall app experience. Your input plays a crucial role in making the application even better, and we're eager to see the innovative strides you've taken!
If you have found an issue or bug, please create an issue.
If it's a quick fix, such as a misspelled word or a broken link, feel free to skip creating an issue. You can create a pull request directly.
Feel free to create an issue with the feedback label. I will take a look and get back to you as soon as I can!