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
-
-
- As a Staff user, I want to have a nice experience and easily write and edit my blog posts.
- As a Staff user, I want to be able to easily manage the products and the website content.
- As a Staff user, I want to know what non staff users think about my job with comments.
- As a Staff user, I want non staff users have the option to know more about me and get in touch.
-
- As a non staff user, I want to Know where I need to go when I first get into the website.
- As a non staff user, I want to find the best way to get in touch, with the staff.
- As a non staff user, I want to view the relevant news with a nice and beaultiful UI.
- As a non staff user, I want to feel integrated to the app with comments and suggestions.
-
-
-
- Galway news use 2 main colors: Black and white.
-
- 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. -
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. -
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 -
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.
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. -
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. -
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'. -
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. -
Account Page:
Page where users can view their own account information or logout, the page allows users to reset their usernames
or password. -
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.
-
Header
-
Authentication
-
Blog
-
Shop & Subscribe
-
About
-
Suggestions & Suggest
-
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. -
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.
-
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.
-
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. -
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.
-
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
-
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.
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.
- 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
```
Your api is running in your localhost on port: 8000 Now you're ready to go! ๐
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:
Than paste into the build
folder like this:
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:
My mentor for his Aaron Help
- Free Open Source.