Responsive Blog app using django rest framework, Reactjs with ecommerce funcionalities using Stripe.

The app is deployed running on Heroku:
https://galway-news-app.herokuapp.com/

The app is directed to people from or interested in whats in currently going on in galway city or just interested in follow
The staff in what they post.
The Blog features the last news from Galway city divided in four categories "News" "Gastronomy" "Events"
and "jobs" it has a Donation subscription page and a eccomerce page with a few products that you can buy from.
You can also meet our staff, view profile and get in touch sending a e-mail with make sugestions or queries.
The app is also provided of a realtime chat that you can get in touch easily with the staff and a comment section
where authenticated users can interact with posters and view what other users think. to read more about the articles, filter, view profile, access shop or subscribe you'll be requested to authenticate.

• django-rest-framework
  
• Djoser
  
• JWT Authentication
  
• Heroku PostgresSQL
  
• Django admin panel
  
• Django Summernote
  
• ReactJs
  
• React Redux
  
• React Hooks
  
• React router dom
  
• Bootstrap
  
• React Stripe
  
• react-awesome-reveal
  
• Intercom real-time chat bot
  

• User stories

  • Staff User

    1. As a Staff user, I want to have a nice experience and easily write and edit my blog posts.
    2. As a Staff user, I want to be able to easily manage the products and the website content.
    3. As a Staff user, I want to know what non staff users think about my job with comments.
    4. As a Staff user, I want non staff users have the option to know more about me and get in touch.

  • Non Staff User

    1. As a non staff user, I want to Know where I need to go when I first get into the website.
    2. As a non staff user, I want to find the best way to get in touch, with the staff.
    3. As a non staff user, I want to view the relevant news with a nice and beaultiful UI.
    4. As a non staff user, I want to feel integrated to the app with comments and suggestions.

• Design

  • Colour Scheme

    • Galway news use 2 main colors: Black and white.

  • Typography

    • Roboto it's the main font imported from google fonts.

• App built in Django Rest Framework divided in 8 apps: accounts, authors, blogs, products, subscriptions cantacts and suggestioins.
• accounts: Stores all users in the application, the custom user model. using Djoser as library
  the app uses Djoser's default permissions. Any CRUD operation in the user it's allowed the
  Current user or Admin, in this case if user try to list or any action to users it's gonna have
  effect to his own user only. you can also: create account 'allow any', activate account email: 'allow any',
  create session or token: 'allow any', destroy token: 'Autenticated', reset and comfirm reset password email: 'allow any',
  reset and comfirm reset user name email: 'allow any'. Admin users can perform any crud action in the Admin panel to users
  In the Admin panel admin users can create, update and delete accounts.
• authors: Stores our staff profile as a separated entity from accounts that represents our staff. Any user can list all authors.
  However you want to get an specific author by id you need to be Authenticated. the app has a one to many to blogs app where
  resides all post in the app, The author can have many posts.
  In the Admin panel admin users can create, update and delete accounts.
• blogs: Stores all posts in application. Any user can list all posts but in order to view a single post by slug, users need
  to be authenticated the app is related to authors app. a post can have an Author, only admin users can poerform delete requests.
  the app also handler send email fuctionalities when users create when request new passords.
  post are created in the Admin panel by admin users only, other than update and delete.
• comments: Stores all comments in the application, if authenticated users can create and list comments but in order to update or
  delete the user has to be the comment owner by custom permission, the app is related to blogs app, a blog post can have, many comments.
  In the Admin panel admin users can create, update and delete comments.
• products: Stores all Stripe products in the databese 'including id keys': Authenticated users can only read products and buy products
  the rest in handled by stripe, you can view all logs in the app through stripe dashboard create new products,
  custom email template, discount cupons and way more features improving security.
  The products can be managed through the admin panel by admin users, create, delete amnd update.
• subscriptions: Stores all Stripe subscription products in the databese 'including id keys': Authenticated users can only read products
  and buy products the rest in handled by stripe, you can view all logs in the app through stripe dashboard create new products,
  custom email template, discount cupons and way more features improving security.
  The subscriptions products can be managed through the admin panel by admin users, create, delete amnd update.
• contacts: Handle send email funcionalitie and Stores in the database. Any user can perform a post request to get in touch.
  those sent emails can be manage by admin users in the admin panel.
• suggestions: Stores suggestions made by users, any authenticated user can send a request or list them however only the suggestion owner
  can update or delete by custom permission.
  also suggestions can be manage by admin users in the admin panel.

• Django administration panel: Django admin panel plays a important role in this application, as staff users are going to make posts and manage the other resoures
  through it. because of that the admin interface has been customised in other to match the website's theme colors, and improve
  users experience.

  Click to views admin login

  
  Click to views admin dashboard

  
  Click to views admin logout

  

• Django Summernote:
  As the application is essentially blog, and staff users can writte the posts through the admin panel django summernote is markdown
  editor that makes so easy to implement images, videos, links, colors etc... it makes a huge diferrence for staff users writing they
  posts. However precations have to be taken while writing or editing the posts. as in the frontend is set innerHTML to render the
  a bad adition can break the layout, but it can be fixed editing again the post.

  Click to views Django Summernote editor

  

• SMTP configuration: I'm using a smtp service ofered by gmail to handle send emails, to create account, request new password, oer contact us
  create your credentials to fill your .env file following those steps on GOOGLE or use Mailtrap or whatever service you prefer.

• Create react app using react-router-dom to manage all routes in the app.
  

• Home Page:
  Landing page that gives you a few options of navigation 'Start' 'Shop' 'Subscribe' 'register' 'login, github's and likendin's links
  

  Click to views Home Page

  

• Blog Page:
  List all posts and the featured post in the application, users can click in each post to read more about the post howerver users
  need to be authenticated in order to see the post details.

  Click to views Blog Page

  
  Clicking in any post the user will be direct to a page with all about the post, content, author and when it was posted.
  Click to views Blog Single Page

  

• Comments:
  When clicking in one blog users are direct to a read more page. in the botton of the page there's a comments section
  where users can iteract with the post comments, theyu can alsdo update and delete they own comments.

  Click to views Comments Section

  

• Shop and Subscribe Page:
  Shop page lists all products avalibe in the website. as e-commerce is not the websites focus galway news ha just a few products
  that users can purchase, The subscription page is very similar but with montly plans instead, users can subscribe in order to support
  the website donating. After users transactions users can have a visual feedback if payment has been made 'Success' or not 'Fail'.

  Click to views Shop Page

  
  Click to views Subscribe Page

  
  Click to views Success Page

  
  Click to views Failed Page

  

• About Page:
  About page is devided in 3 subsections, About us: users can have the opportunity to know more about the company
  Get in touch: users can easily get in touch with Galway news sending a Email.
  Authors: Users can have the opportunity to know more about the staff, users can click to know more info
  about the but to do that they need to be authenticated.

  Click to views about us and get in touch sectiion

  
  Click to views authors sectiion

  

• Account Page:
  Page where users can view their own account information or logout, the page allows users to reset their usernames
  or password.

  Click to views Account Page

  

• Suggestions and Suggest Pages:
  In Suggest page is the space where users can send suggestions or queries, Sugestions Page is the space where
  all suggestions are listed. users can also update and delete their own suggestions or know more about it by clicking.

  Click to views Suggest Page

  
  Click to views Suggestions Page

  

Click to views Structure

• Header
  

  Click to views Mockups

  

• Authentication
  

  Click to views Mockups

  

• Blog
  

  Click to views Blog Mockups

  
  Click to views Comment Mockups

  

• Shop & Subscribe
  

  Click to views Comment Mockups

  

• About
  

  Click to views About Mockups

  

• Suggestions & Suggest
  

  Click to views Suggestions and Suggest Mockups

  

• Blog posts

  Endpoints

  List blog posts: http://127.0.0.1:8000/api/blog/ [GET]

  Endpoint returns all blog posts in the api: status 200
  If there is no posts returns an [ ] status 200
  The route is public anyone can access.
  
  

  Featured blog posts: http://127.0.0.1:8000/api/blog/featured [GET]

  Endpoint returns the featured blog posts in the api: status 200
  If there is no posts returns an [ ] status 200
  The route is public anyone can access.
  
  

  Find blog posts by slug: http://127.0.0.1:8000/api/blog/ {slug} [GET]

  Endpoint find the blog posts passing the slug as the last param: status 200
  If the post doesn't exists returns "Not found"
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.

  Find blog posts by specific category: http://127.0.0.1:8000/api/blog/category [POST]

  Endpoint returns all blog posts of spacific category
  example: 'jobs' or 'events': status 200
  If there is no posts returns an [ ] status 200
  The route is public anyone can access.
  
  

  delete blog posts by ID: http://127.0.0.1:8000/api/blog/ {pk} [DELETE]

  Endpoint deletes blog post passing id as a param and returns status 204
  Only admin users can access the route returns try to access route without
  admin powers returns" Authentication credentials were not provided.": status 401.
  Rendering

  Rendering posts

  Post can be only added using admin panel.
  but staff users can either delete or update posts.
  Once added posts are rendered in the frontend.
  
  

• Comments

  Endpoints

  List comments: http://127.0.0.1:8000/api/comments/ [GET]

  Endpoint returns all comments in the api: status 200
  If there is no posts returns an [ ] status 200
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  Find comment by Id: http://127.0.0.1:8000/api/comments/ {pk} [GET]

  Endpoint find the comment passing the id as the last param: status 200
  If the post doesn't exists returns "Not found" status 404
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  Post comment: http://127.0.0.1:8000/api/comments/create [POST]

  Endpoint creates blog post and returns itself
  By default users must be logged in order to post comment
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  delete blog posts by ID: http://127.0.0.1:8000/api/comments/delete {pk} [DELETE]

  Endpoint deletes comment post passing id as a param and returns status 204
  If non author user try to delete comment returns: 'Editing Comments is restricted to the creator only'
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  delete blog posts by ID: http://127.0.0.1:8000/api/comments/update {pk} [PUT]

  Endpoint updates comment post passing id as a param and returns status 204
  If non author user try to delete comment returns: 'Editing Comments is restricted to the creator only'
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  
  Rendering

  Rendering comments

  To comment users have to be logged in.
  buttons update and delete appear to comment owner only.
  Once added posts are rendered in the frontend.
  
  

• Suggestions

  Endpoints

  List suggestions: http://127.0.0.1:8000/api/suggestions/ [GET]

  Endpoint returns all suggestions in the api: status 200
  If there is no suggestions returns an [ ] status 200
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  Find suggestions by id: http://127.0.0.1:8000/api/suggestions/ {pk} [GET]

  Endpoint find the suggestion passing the id as the last param: status 200
  If the suggestions doesn't exists returns "Not found" status 404
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  

  Post suggestion: http://127.0.0.1:8000/api/suggestions/create [POST]

  Endpoint creates suggestion and returns itself
  By default users must be logged in order to post suggestions
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  delete blog posts by ID: http://127.0.0.1:8000/api/comments/delete {pk} [DELETE]

  Endpoint deletes suggestion passing id as a param and returns status 204
  If non author user try to delete suggestion returns: 'Editing suggestions is restricted to the creator only'
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  

  delete blog posts by ID: http://127.0.0.1:8000/api/comments/update {pk} [PUT]

  Endpoint updates suggestion post passing id as a param and returns status 204
  If non author user try to delete suggestion returns: 'Editing suggestions is restricted to the creator only'
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  
  
  Rendering

  Rendering suggestions

  To comment users have to be logged in.
  buttons update and delete appear to suggestion owner only.
  Once added posts are rendered in the frontend.
  
  

• Authors

  Endpoints

  List authors: http://127.0.0.1:8000/api/authors/ [GET]

  Endpoint returns all blog posts in the api: status 200
  If there is no posts returns an [ ] status 200
  The route is public anyone can access.
  
  

  Find blog posts by id: http://127.0.0.1:8000/api/authors/ {pk} [GET]

  Endpoint find the author passing the id as the last param: status 200
  If the post doesn't exists returns "Not found"
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  Rendering

  Rendering Authors

  Authors can be only added using admin panel.
  staff users can also delete or update posts.
  Once added posts are rendered in the frontend.
  
  

• Contacts

  Endpoint

  Post Email: http://127.0.0.1:8000/api/suggestions/ [POST]

  It has one post endpoint only returns: Email sent successfully
  or Email failed to send if failed.
  The route is public anyone can access.
  
  
  Rendering

  Rendering Email

  To comment users have to be logged in.
  buttons update and delete appear to suggestion owner only.
  Once added posts are rendered in the frontend.
  
  

• Subscribe and Products

  Endpoints

  List Products or Subscriptions: http://127.0.0.1:8000/api/{products || subscriptions}/ [GET]

  Endpoint returns all products or subscriptions in the api: status 200
  If there is no products or subscriptions returns an [ ] status 200
  The route is not public try to access without authorization returns
  "Authentication credentials were not provided.": status 401.
  Rendering

  Rendering and transaction

  To add product you must get product_id on stripe dashboard
  products or subscriptions can be only added using admin panel.
  staff users can also delete or update posts.
  Once added posts are rendered in the frontend.
  Use `4242424242424242` to Succeeds and immediately processes the payment.
  Use `4000000000003220` to 3D Secure 2 authentication must be completed for a successful payment.
  Use `4000000000009995` To fails with a decline code of insufficient_funds.
  
  

• Create account and Authentication

  Endpoints

  Create account: http://127.0.0.1:8000/auth/users/ [POST]

  Sending post request to this endpoint with 'name', 'email', 'password'
  and 're_password' returns itself if succefully created: status 200
  However the account remains inactive users need to activate in the email used to create the account
  If the email used to create the account already exists returns
  "user account with this email already exists" status 400.
  The route is public anyone can access.
  
  

  Activate account: http://127.0.0.1:8000/auth/users/activation/ [POST]

  To activate account the endpoint requires 2 params 'uid' and 'token'
  those params are sent to the email used to create the account
  By sending those params recieved actives the account returning a status 204
  If the token is invalid it returns "Invalid token for given user." status 400
  If the token has been already used returns "Stale token for given user". status 403
  The route is public anyone can access.
  
  

  Create Session: http://127.0.0.1:8000/auth/jwt/create [POST]

  To Login account the endpoint requires 2 params 'email' and 'password'
  If the params if correct returns status 200 and access token and refresh
  If one of the params are incorrect returns status 401 and
  "No active account found with the given credentials"
  The route is public anyone can access.
  
  

  Request new password: http://127.0.0.1:8000/auth/users/reset_password/ [POST]

  To Request password the endpoint requires a params the current 'email'
  it returns a status 204 and send and email to reset account
  The route is public anyone can access.
  
  

  Set new password: http://127.0.0.1:8000/auth/users/reset_password_confirm/ [POST]

  To Request password the endpoint requires 4 params 'new_password', 're_new_password
  'uid' and 'token' that the user recieve after Request new password
  By sending those params recieved actives the account returning a status 204
  If the token is invalid it returns "Invalid token for given user." status 400
  If the token has been already used returns "Stale token for given user". status 403
  The route is public anyone can access.
  
  
  Rendering

  Rendering Create account

  Complete Register form 'Name", 'email', "Password", "Comfirm Password"
  Password field is validated, it requires a good level of complexity.
  After send form user is required to comfirm in the email account.
  Users, can be created, updated and deleted by the staff in the admin panel.
  
  Creating account
  
  
  Email received
  

  Rendering Authentication

  Authentication form requires 'Name" and 'email'
  If something goes wrong it returns "Authentication Failed".
  If Login is successfull the user is redireted to Blog post
  Login
  
  
  

• Users

  Endpoints

  List, Update or Delete User: http://127.0.0.1:8000/auth/users/me [GET], [DELETE], [PUT]

  By default Users can List, Delete or Update himself only using this route,
  Try to access the route without authorization returns
  "Authentication credentials were not provided.": status 401.
  Rendering

  Rendering User

  User rendered in the frontend.
  Renderting User
  
  

Links Header: working fine Usage from 'react-router-dom' to define links inside the application.
fluid navigation between pages.

Links Home Page: All links working fine fluid navigation used blank for external links.

Links Pages and Redirects: All Links diretect to assigned location, Authenticated redirect to
Blogs and "need to login" Redirect working well, No links Broken.

Login and Register form: Both forms required by HTML validation and types specified
Register field requires complex pattern, minLength and javascript validation to increase security.

Post Suggestion and Get in touch form: Both forms Have all fields required and
minLength to prevent send blank.

Event Buttons: Working as expected Login, Register, Suggest, Get in touch, Comment: Posting well.
Account, Comment, Suggestion: Updating well. Comment, Suggestion and Blog Post deleting well.

Comment and Suggestion buttons: Update and deletew buttons are hidden if user is not comment or suggestion
owner.

Shop and Subscribe buttons: Redirecting to stripe checkout ok!

The app has been tested in those browsers:

Chrome
Brave
Edge
Firefox

Mobile:

Iphone 10
Sansung Galaxy S7
Sansung A10

and Browser inspector

All Sizes.

ESlint: Tool that verifies and correct automatcally javascript and HTML
errors, prevents and reports syntax errors.

The app has been tested also by:
other Professional developers
my mentor Aaron.
family and friends
Tested and documented by me.

Because of Blog posts are set as innerHTML in the frontend
if the edition in the Editor is big than the hyperview can breaks
the layout.

Requirements:
Python and Pip

• In your root diredtory:
  
  In your .env.example rename the file to > .env and change the Env variables.
• Windows:

```
    cd server
    python -m venv env
    env/Scripts/activate
    pip install -r requirements.txt
    python manage.py runserver
```   

```
    cd server
    python -m venv env
    source env/bin/activate
    pip install -r requirements.txt
    python manage.py runserver
```   

Requirements:
Nodejs and NPM
opcional Yarn

In the root folder.
cd client folder.
Rename .env.example to .env and change the env variables.

in the terminal run yarn or npm run
Than yarn start or npm run start

*Remenber: You will need to have your api running too!.
*Now you're ready to go!. 🚀🚀

The app is deployed on Heroku.
Requirements:
Heroku_django WhiteNoise for static files.
warning if you're usig the current version of django-simplejwt=6.0.0 for some reason
is not compatible with heroku use version: 4.4.0

cd your client folder and run yarn build it will generate a build of your react app copy
the build folder in your server folder.

Download and install the Heroku CLI.

Than cd server and Configure your App and postgres DB on Heroku.

Log in to your Heroku account.

$ heroku login 

Clone the repository
Use Git to clone your app code source code to your local machine.

$ heroku git:clone -a galway-news 
$ cd galway-news 

Deploy your changes
Make some changes to the code you just cloned and deploy them to Heroku using Git.

$ git add . 
$ git commit -am "make it better" 
$ git push heroku master 

Don't forget to set your env variables!

Done! you made it! 🚀🚀🚀

In the client folder

go to src/django_admin folder:

View folder

Than paste into the build folder like this:

View folder

The files it's simply an html file that extends Django's admin template
with an css file that overrides the currenmt styles.

• I received inspiration for this project from:

  https://codeinstitute.net/

  My mentor for his Aaron Help

• Free Open Source.