Welcome to my repository that represents StockBook website.
It is a stock blog website that allows users to add their stock blogs, news, order and earning events. Encourage users for more interaction to increase stock movement in the stock market.
This repository contains the code for building a modern and responsive website using React for frontend and Django-rest for backend development.
Visit StockBook website website
Visit StockBook GitHub Repository
- Introduction
- User Experience
- Structure
- Skeleton
- Features
- Technologies Used
- Testing
- Bugs
- Deployment
- Credits
- Blog platform divided into two sections:
- Stock post: share the stock news, transactions with ability to attach image or chart.
- Earning event: share the earning date for a stock.
- Encourage friendly interactions for financial and social goals through:
- Add comments in stock posts.
- Click counted bull as a buy or bear as a sell in stock posts.
- Profile books that allow users to follow or unfollow other user profiles to feed on their posts and stock movements.
- The permission for functionality limited accordingly:
- Unregistered user: Only view most of the site without interactions of above objectives.
- Registered user: Full accessibility and interactions.
- Perform search in stock and earning pages and search with selection of stock for a specific sector from 11 categorized GICS*.
*GICS: Global Industry Classification Standard
- Users and investors that are interested in the stock market.
- New investors who are seeking guidance and tips in investing.
- Investors that are sharing their experiences and transactions and news of stocks.
- Traders that are trying to gain an advantage from stock sentiment as a signal to buy or sell.
- Profile Model:
- Purpose: Represents user profiles, providing information like name, biography, and profile image.
- Attributes:
- owner: One-to-one relationship with the User model representing the user who owns the profile.
- created_at: DateTimeField indicating when the profile was created.
- updated_at: DateTimeField indicating when the profile was last updated.
- name: CharField representing the name of the user.
- bio: TextField for a brief biography of the user.
- image: ImageField for the profile image of the user.
- Stock Model:
- Purpose: Represents stocks owned by users, storing details such as title, symbol, company name, sector, order type, etc.
- Attributes:
- Similar to Profile model, it has owner with ForeignKey relationship with the User model, created_at, and updated_at fields.
- Other fields include title, symbol, company_name, sector, order, order_date, order_price, quantity, content, and image.
- order_choices and sector_choices provide options for the order type and sector respectively.
- Earning Model:
- Purpose: Stores earnings data associated with stocks.
- Attributes:
- owner: ForeignKey relationship with the User model.
- created_at: DateTimeField indicating when the earnings data was created.
- updated_at: DateTimeField indicating when the earnings data was last updated.
- ticker: CharField representing the ticker symbol of the associated company.
- earning_date: DateField indicating when the earnings were reported.
- & 5. Bear Model and Bull Model:
- Purpose: Represent entities associated with users and stocks, indicating pessimistic (bear) or optimistic (bull) sentiment towards a stock.
- Attributes:
- owner: ForeignKey relationship with the User model.
- stock: ForeignKey relationship with the Stock model.
- created_at: DateTimeField indicating when the entity was created.
- These models help track sentiment towards stocks among users.
- Comment Model:
- Purpose: Represents comments made by users on stocks.
- Attributes:
- owner: ForeignKey relationship with the User model.
- stock: ForeignKey relationship with the Stock model.
- created_at: DateTimeField indicating when the comment was created.
- updated_at: DateTimeField indicating when the comment was last updated.
- content: TextField representing the content of the comment.
- Follower Model:
- Purpose: Represents the relationship between users where one user follows another.
- Attributes:
- owner: ForeignKey relationship with the User model, representing the user who follows.
- followed: ForeignKey relationship with the User model, representing the user being followed.
- created_at: DateTimeField indicating when the relationship was created.
Milestones & User Stories:
The stock-book project was developed with 6 milestones and each contains their user stories that labeled according to its priority:
Link to the stock-book project.
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 1 | Admin user name and password | Admin | I want to be able to create an admin name and password so I can have full control of the backend. | Must have |
| 2 | User Profile | Admin | I want to be able to access and edit User's Profile so I can manage user authentication and permission. | Must have |
| 3 | Profiles app | Admin | I want to be able to have full control of profiles app on backend so I can allow user to access and manage their profiles on frontend. | Must have |
| 5 | Stocks app | Admin | I want to be able to have full control of stock app on backend so I can allow users for the best use and edit their stocks transactions on frontend. | Must have |
| 6 | Comments app | Admin | I want to be able to have full control of comments app on backend so I can allow users for the best use and edit their comments on frontend. | Must have |
| 7 | Bulls app | Admin | I want to be able to have full control of bull app on backend so I can allow users for the best use of bull button on frontend. | Must have |
| 8 | Bears app | Admin | I want to be able to have full control of bears app on backend so I can allow users for the best use of bear button on frontend. | Must have |
| 10 | Followers app | Admin | I want to be able to have full control of followers app on backend so I can allow users for the best use by adding their followers on frontend. | Must have |
| 11 | Search and filter equipment | Admin | I want to be able to create search and filter equipment on backend so I can allow users find particular content more easily on frontend. | Should have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 12 | Navigation Bar | User | I want to reach the navigation bar at the top of the page so I can navigate between the pages freely. | Must have |
| 13 | Fixed Navigation | user | I want to see nav bar in every page so I can navigate any page without go back to the home page. | Should have |
| 14 | Registration and Login Status | Registered User | I want to be able to be aware of my registration and login status in the nav bar so I can make fast action for registration or log out for protection. | Must have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 15 | registration | User | I want to be able to have full control of stock app on backend so I can allow users for the best use and edit their stocks transactions on frontend. | Must have |
| 16 | Sign in/out | Registered User | I want to be able to sign in to my account so I can get full advantages and the best use of the site. | Must have |
| 17 | Refreshing Access Tokens | Registered User | I want to be able to maintain my logged-in status until I choose to log out capability so I can have best use and my experience is not compromised. | Must have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 18 | Create a new Stock Post | Registered User | I want to be able to add a new stock post so I can publish it for others to see and interact with it. | Must have |
| 19 | Add Stock Details and Transaction. | Registered User | I want to be able to add the details and the transaction of the stock so I can give more attention to the volume and my portfolio. | Must have |
| 20 | Add Stock Chart and News | Registered User | I want to be able to add a chart image and news for the stock post so I can share more knwoledge about stock indicators within the chart. | Should have |
| 22 | Edit/Delete Stock Post | Registered User | I want to to be able to make any changes in my stock post details so I can add more information or correct any details or delete the post. | Must have |
| 26 | Search Stocks by Keywords | User | I want to to be able to search for stock posts (symbol, order, user name ..) so I can Easily find the subject that I'm interested in. | Should have |
| 44 | Filter Stocks by Sector | Registered User | I want to be able to filter the stocks according to sector so I can easily view all stocks that belong to the sector that I like most. | Nice to have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 23 | Top Appearing Stock | User | I want to be able to view most recent posts so I can be up to date and select the new stock quickly. | Should have |
| 24 | View All Stock Posts | User | I want to be able to view all stock posts so I can select the stock directly after entering the home page. | Must have |
| 25 | Keep Scrolling | User | I want to be able to keep scrolling throught all stock posts so I can have unstoppable scrolling without any distraction. | Nice to have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 27 | Create a Comment | Registered User | I want to be able to Create my own comments so I can share my thoughts and interact with others. | Must have |
| 28 | Edit a Comment | Registered User | I want to be able to edit my comments so I can reform and make best changes to my comments. | Must have |
| 29 | Delete a Comment | Registered User | I want to be able to delete my comment so I can get rid of unwanted comments. | Must have |
| 30 | View Comments | User | I want to be able to view all comments in the stock post so I can see the reaction of others about every stock post. | Must have |
| 31 | Click Bull for a Stock | Registered User | I want to be able to click bull button for a stock so I can represent my thought about stock price and push the stock order to buy related to a stock post. | Must have |
| 32 | Click Bear in Stock Posts | Registered User | I want to be able to click bear button for a stock so I can represent my thought about stock price and push the stock order to sell for a stock post. | Must have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 33 | Filter Stocks by Followed Users | Registered User | I want to be able to view stocks of followed users so I can keep track with their new publishing. | Nice to have |
| 36 | View Users Profiles | User | I want to be able to view users profiles so I can know more about them and their stock. | Must have |
| 37 | Follow/Unfollow Users | Registered User | I want to be able to follow or unfollow users so I can keep track with followed. | Must have |
| 38 | Edit profile | Registered User | I want to be able to edit my profile so I can update my profile with new image and bio. | Must have |
| 39 | View User Profile Statistics | User | I want to be able to view the last user statistics (bio, number of posts, follows, users followed, bulls stocks and bears stocks) so I can know more about them and their stocks orders. | Should have |
| 40 | Most followed profiles | Registered User | I want to be able to view most followed profiles so I can know which profiles are popular. | Nice to have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 34 | View Bulls in Stock | Registered User | I want to see stocks that I clicked for bull so I can decide which stock I need to buy. | Nice to have |
| 35 | View Bears in stocks | Registered User | I want to see stocks that I clicked for bear so I can decide which stock I need to sell. | Nice to have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 41 | Create a new Earning event | Registered User | I want to be able to add a new earning for a stock so I can publish it for others to see and interact with it. | Must have |
| 42 | Edit/Delete Earning | Registered User | I want to be able to make any changes in my earning details so I can add more information or correct any details or delete the event. | Must have |
| 43 | View All Earning events | User | I want to be able to view all earning events so I can select to see the earning that I like. | Must have |
| 45 | Search Earning Event by keyword | User | I want to be able to search earning events by ticker stock or user so I can easily find the earning that I'm interested without scrolling the page. | Should have |
# |
User Story |
User/Registered user/Admin |
Content |
Label |
|---|---|---|---|---|
| 4 | Portfolio app | Admin | I want to be able to have full control of Portfolio app on backend so I can allow users for the best use and edit Portfolio on frontend. | Nice to have & Ignored |
| 9 | Likes app | Admin | I want to be able to have full control of likes app on backend so I can allow users to add or remove their likes on frontend. | Nice to have & Ignored |
| 21 | Auto adding Default Image Related to the Stock Order | Registered User | I want to be able to add image or leave it as default so I can give more attention about my stock order wither is it hold: bull and bear image or buy: bull image or sell: bear image. | Nice to have & Ignored |
This component is rendering a spinning animation, to indicate that something is loading or processing in the background. It will provide feedback to users that an action is being performed and to prevent them from feeling like the application is unresponsive.
Used in stock, earning, comment, profile pages and popular profiles including search and select sector menu.
This component is used in stock, earning, comment, profile, nav bar and in creating comment to render an image profile.
This component imported in stock, earning and comment to help users for select edit or delete as dropdown menu when clicking on the three dots.
Also give function in profile page as ProfileEditDropdown to select edit profile, change username, or change password as dropdown menu when clicking on the three dots.
This component is used to render the navbar across the respective pages of the app.
This component will work when a page is not found, 404 alert.
- Home page/Stocks page:
- Earnings page:
- Montserrat, sans-serif: Montserrat Weight: 100 – 900
Montserrat is a good font to use due to its modern design, readability, and wide availability.
The website delivers a consistent and user-friendly experience across a wide range of devices, contributing to improved usability and accessibility.
- Desktop: 992px and above
- Navigation bar with visibility for logo and Add menu and all items.
- Grid layout adjusts to accommodate larger screen sizes.
- Tablet: 768px - 991px
- Navigation bar: Items and add menu may collapse to a burger drop down menu.
- Stocks and the most followed list will be adjust vertically.
- Mobile: Below 768px
- Navigation bar: the Logo and the burger icon will vertically align.
- Content stacks vertically for easier scrolling on smaller screens.
Intuitive, efficient, and located on top of all pages for helping users find the information they're looking for quickly and easily.
- Logo: It is created as a brand image positioned at the left-hand side. Contains text that represents the name of the website and the letter "O" replaced by an icon to illustrate the communication. Clicking on the logo directs users back to the homepage.
- Logged out user:
- Homepage, Earning on the left
- Sign in, Sign up on the right
- Logged in user:
- Homepage, Earning, Add menu on the left
- Feed, Bulled, Beared, Sign out, Profile on the right
-
Responsive - small screen:
-
Auto-close the toggle menu when clicking outside the toggle menu.
-
Auto-close the toggle menu when clicking on the links in the toggle menu and the links inside the add dropdown menu.
-
Auto-close will not work when clicking on the add dropdown menu
-
Form for registration with proper validation warnings and link to sign in for already registered users.
Form to sign in for registered users with proper validation warnings and link to sign up if the user not registered yet.
Visit the page by clicking on the logo or Home item.
The stocks are sorted by the recent created stocks.
List Sorted by the most followed profiles and the ability to follow up or unfollow as buttons for registered users.
The list showed in the above image in the home page section.
Visit the stock by clicking on the image or the comment icon.
- Profile details: username author and the profile image
- Chart or stock image
- Stock details: title, symbol, company name, sector, order, content ...etc.
- Bulled (optimistic: buy) or Beared (pessimistic: sell)
- All users can view the sum number beside the beared and bulled icons.
- Logged in users only can select between pessimistic (beared) or optimistic (bulled) sentiment towards a stock - can't select both. Also, they can unselect by clicking again on the icon they selected before.
- prevent the logged out users from selecting with proper validation warning when clicked.
- prevent the selection for the authors of the same stock with proper validation warning when clicked.
- Comments:
- All users can view the comments.
- Only logged in users can add/edit/delete their comments on a stock.
Only logged in users can create/edit/delete their own stocks by clicking on Add menu in the nav bar then select Stock post.
Only logged in users can edit/delete their own stocks by clicking on three dots in the stock and select edit/delete.
- On create/edit stock page can the logged in users preview their image before confirm create/edit
- On create/edit stock page can throw proper validation warnings error for image size/height/width or when filling text.
Visit the page by clicking on the Earning item in the nav bar.
The earnings are sorted by the nearest earning date.
Visit the earning by clicking on the ticker on the earning.
- Profile details: username author and the profile image.
- Ticker: the ticker symbol of the stock.
- Earning date: the earning date that is declared for the stock.
Only logged in users can create/edit/delete their own stocks by clicking on Add menu in the nav bar then select Stock post.
On create/edit stock page can throw proper validation warnings error for submit the content.
All users can view profile users by clicking on the profile image or username in the stock or in the earning or from list of most followed profiles.
Profile auto-created when the user signs up with default profile image.
- Username
- Profile image
- Profile statistics:
- Sum numbers of the stocks.
- Sum number of followers.
- Sum number of the following.
- Bio
- Stocks posted by users.
The registered user can visit the edit/change username/change password pages from the three dots menu on the owner profile page as image above.
The edit pages follow the validation rules with throwing proper warning errors.
Those pages are limited to the logged in users.
- Feed page: Represents the stocks of the users that are being followed.
- Bulled page: Represents the bulled stocks.
- Beared page: Represents the beared stocks.
- In all stocks page, all users can search by keyword as it displayed under.
- In all earnings page, all users can search by keyword as it displayed under.
- In all stocks page, all users can select all sectors or a specific sector from 11 categorized GICS sectors in dropped down menu.
- HTML5 & CSS3
- Python
- JavaScript
- JSX/React
- django REST Framework A powerful toolkit for building web APIs
- django Allauth
- django-filter Adding search functionality to serializers
- django-extensions
- django-cors-headers
- react-bootstrap dynamic front-end framework that combines the power of React, a popular JavaScript library, with Bootstrap
- react-infinite-scroll-component
- react-responsive
- react-router-dom
- react-scripts
- react-select
- JWTDecode
- Axios - HTTP Client for the browser and Node.js
- Node Used as package manager to install dependencies
- cloudinary Used to store website's images.
- elephandSQL Used to store and manage PostgreSQL database.
- Pillow Used for adding image processing capabilities
- whitenoise Allows web app to serve its own static files
- gitpod Used as the development to build the page.
- gitHub The project’s Version Control Management System.
- psycopg2 Is the popular PostgreSQL adapter used in Python.
- gunicorn Allows to run multiple Python processes within a single dyno
- django-extensions Add functionality to the project.
- django-allauth Addressing authentication, registration, account management as well as 3rd party (social) account authentication.
- django-summernote Support admin mixins and widgets.
- graphviz Set of tools for visualizing graph data, ERD in our project.
- pyparsing Library for parsing text strings.
- pydot Library for creating, manipulating, and visualizing graphs in DOT format.
- looka Create and design the logo.
- font awesome Add Icons to the project.
- cloud convert Used to convert images to WEBP.
- Heroku Used to deploy the project.
- Balsamiq for creating the wireframes
- google fonts for fonts used in the site.
- tinypng Smart WebP, PNG compression to boost the website.
Click on provided link to visit the Test page.
-
Getting a 401 when trying to login:
Changing CLIENT_ORIGIN_DEV in env.py to the local host that configured in package.json. Removing the trailing slash from the last entry in the CSRF_TRUSTED_ORIGINS settings.
-
EarningPage doesn't seem to be rendering
Add the missing trailing slash at the end of: /earnings/${id}
-
Can't resolve react-router
Run npm install react-scripts@latest in the terminal to install the latest version.
Run npm install in the terminal to update the package-lock.json file.
Change the proxy to: http://127.0.0.1:8000, and added to ALLOWED_HOSTS
For the lack of time.
- The profile bio not displayed.
- Errors displayed when refreshing the website or click on sign up/in. But these cause no harm or are unfunctional if not fixed.
Steps of deploying to Heruko:
Click on 'Create new app' Then write the name of the project.
Select your region.
Click on 'Create App'.
Update the 'Config Vars' located in the 'setting' tab with the following:
- ALLOWED_HOST
- CLIENT_ORIGIN
In the 'deploy' tab select 'GitHub' then search and connect to the repository.
In the end of the 'deploy' tab page at 'Manual Deployment' click on the 'Deploy Branch'.
- code institute: Django REST framework, Moments
- stack overflow
- Tech with Tim - youtub
- react-bootstrap Nav bar - Form
- Suraj Katwal - wplogout: Export ERD from Django.