Easy as a cup of tea.
Project Description: ChaiTrade is a Website which helps user learn Stock Market and the Trading world. It consists of different types of users and various features, all explained in detail later. The main idea of the project is to build a virtual trading simulator which helps people invest virtual money in the real market, so as to reducing risking money with little knowledge.
Working with the project (get started): To run the project first install the node modules by typing the command "npm i" in the terminal. This will set you up. Now, all you got to do is give the command "npm start" in the terminal. The project will now be set and running. Go to the browser enter the local host number mentioned and start surfing through the site.
Different Types of Users:
1. Admin: the one who manages the project. The admin:
i. looks after all the functionalities.
ii. corrects all the errors
iii. takes care of malpracticies
iv. looks after authentication and verification
2. User: the user is the main client. The user:
i. can read the latest news
ii. can interact with the mentor
iii. can ask questions
v. can provide feedback
vi. can get virtual money and trade it
-> To be a user one needs to sign up.
-> Different features can be accessed based on the premium plan you have subscribed to.
3. Mentor: the mentor has it's own panel. The mentor:
i. can interact with the user
ii. can reply to user queries
iii. can read updated charts and news
iv. can write blogs based upon the latest trends
v. can also participate in user activities, i.e. can virtually trade as well
vi. can not influence the users in any way (restricted activity, can be removed from the platform)
-> One can only become a mentor once verified by the certification they provide.
Various Featues the site offers:
1. News Section:
provides with the latest updates present in the media.
Available to all types of users as well as all people visiting the site.
The news section can be accessed from the navigation bar present as a permanent feature on each web page.
Can only be altered by the admin.
You can search for different news articles as well here.
2. Charts Section:
has the updated values of different stocks and their types, such as companies, commodities, forex and crpto.
Major contributors also include the analyst, who can make charts based on the statistical data provided to them.
The data representation can be in the form of line charts, pie graphs, histograms or tables.
You can also view real time charts using the trading view widget.
3. Featured Blogs Section:
This section is under the control of mentors. The mentors can publish/ post their reports here.
It helps users better understand the market based on the advice from mentors. This is a paid feature and only those
users who are subscribed to this can get it.
Users will be able to like blogs posted by the mentors.
User will be able to search for the blogs.
4. Blog Section:
This section is where users of the website can write about their experiences on this platform. This can be seen by all
users.
5. Trading Simulator:
This is the main part of the project. When a user logs-in they can access the simulator.
Steps:
i. request money from the simulator.
ii. you will be provided with some amount of virtual money for free.
iii. look at the charts.
iv. choose the stocks you want to invest in.
v. once you select the stocks it shows under you share holdings.
vi. your virtual money will gain profit or face loss based on the real market trends, but the market will not be
affected by your virtual money in anyway.
vii. study the patterns, you can re-invest the money, invest more money or even withdraw money based on the plan
you chose.
viii. you can get the realtime view of stocks.
6. Transactions:
Here you will get to view the history of the subscription plans you have subsribed for and your complete transaction
history.
You will start from the home page, from here you can access other pages from the nav bar about or even the additional features
present on the footer of the page
Featues present on the navigation bar:
-> Authentication page: logs user in and out of the webpage, also lets people signUp
-> Profile: takes the user to visit their profile, update their information
-> News Section: you can visit the news section
-> Charts Section: will be able to view charts
-> Simulator: one of the featured pages
-> Featured Section: one of the featured pages
-> Blog Posts: one of the featured pages
-> Transactions: you can view transaction history in this page
Featues present on the footer:
-> about us page: contains the information about the website and it's authors, and developers
-> faq section: contains the frequently asked questions about stock market terminology
-> contact us: contains all contact information via which the user can contact the site owners
-> pricing: contains the information regarding the pricing of the webite, how the money will be charged for different users
opting various plans on the webpage.
->premium purchase plan will give you access to the featured section.
->simulator pro plan will give you 20000 credits for 50$ to use in the simulator section.
->simulatur premium plan will give you 40000 credits for 100$ to use in the simulator section.
along with this you get to see all your plan transactions in the transaction page.
Additionals which can be accessed by different users are:
-> Mentor Panel: for verified mentors only, their own side of the website where they can:
->first apply as a mentor(subject to approval from admin).
->write featured blogs .
->view all their individual posted blogs.
NOTE: to access the mentor panel you have to verify as a mentor, then only you will be provided with th functionalities mentioned
under them.
-> Admin Panel: for the admin to manage the different functionalities of the website.
->Features: You can see all the featured blogs posted by all the mentors. The admin can edit and delete them.
->Users: You can see/search all the users who have registered and the admin can edit or delete their credentials.
->Add FAQs: You can post the market terminologies from this page.
->FAQs: You can fetch all the market terminologies, edit and delete them.
->Mentors: You can see all the mentors.
->Blogs: You can see all the blogs posted by all the users. The admin can edit and delete them.
->Applications: Every user can apply as a mentor and their applications can be seen here for the admin to approve. Once
approved they become a mentor.
->Queries: All the data which has been posted at the contact us can be replied to from this page and the
reply will be mailed to them.
->Add charts: Here you can add new stocks to the charts section.
->Charts: Here you can view, edit or delete the existing values of the stocks.
Top right corner of the nav bar contains the login/ signup link, where you can signup or login to your account.
After, which you can eaither explore the site further, ask questions or experience the virtual trading simulator.
Mid Review Credits: The project was made by a team of 5 members, who out their efforts on various aspects to make the site function.
Our project members are:
1. Darshan Bennur:
Profile Page: frontend and backend
designed the user profile page as well as built the backend for the same
Authentication: frontend and backend
designed the UI for signIn / signUp page as well as dealt with the backend, keepin the records of the users and JS
validation of forms
NavBar: frontend
designed the NavBar (header) present on everypage of the website
github: Darshanbennur
2. Subhangi:
Home Page: frontend
designed the UI of the homepage, also the landing page (the first page of the site)
Charts Section: frontend
designed the UI of the charts section, visitable by an option on the navbar
FAQ: frontend and backend
designed the UI of the FAQ section as well as the backend, which deals with updating the FAQ's (frequently asked
questions) by adding them to the database.
3. Abraham V Jose:
Pricing: frontend
designed the UI of the pricing page, link available on the fotter of the site
Blog Section: frontend and backend
designed the UI of the blogs section along with the backend, keeping the record of all the new blogs written in the
databse with the profiles
Mentor Section: frontend and backend
designed the UI of the mentor section as well as the backend of the section, it consists of a completely different panel
only available to verified mentors
4. Hridayesh Nadella:
Contact Page: frontend and backend
designed the UI of the contact us page as well as did the backend, which includes updating of all the contact
information from the database
News Section: frontend and backend
designed the UI of the news section as well as the backend, uploading the latest news by the backend database,
it will further be connected to api
5. Vamsidhar:
About Us: frontend
designed the UI of the about us page, displaying information about the website, it's authors and developers
Featured Section: frontend and backend
designed the UI of the featured section as well as developed the backend, which will jelp in uploading reports by the
analysts to the page
Fotter: frontend
designed the UI of the fotter present at the end of every page of the website, guiding the user to different sections of
the site
End Review Credits:
The project was made by a team of 5 members, who out their efforts on various aspects to make the site function.
1. Darshan Bennur:
Simulator Page: frontend and backend
designed the complete interface and built the backend for the same
Profile Page: frontend and backend
designed the user profile page as well as built the backend for the same
Authentication: frontend and backend
designed the UI for signIn / signUp page as well as dealt with the backend, keepin the records of the users and JS
validation of forms
NavBar: frontend
designed the NavBar (header) present on everypage of the website
github: Darshanbennur
2. Subhangi:
Admin Panel: frontend and backend
designed the complete interface and built the backend for the same
Home Page: frontend
designed the UI of the homepage, also the landing page (the first page of the site)
FAQ: frontend and backend
designed the UI of the FAQ section as well as the backend, which deals with updating the FAQ's (frequently asked
questions) by adding them to the database.
3. Abraham V Jose:
Pricing: frontend and backend
designed the UI of the pricing page, link available on the fotter of the site
Blog Section: frontend and backend
designed the UI of the blogs section along with the backend, keeping the record of all the new blogs written in the
databse with the profiles
Mentor Section: frontend and backend
designed the UI of the mentor section as well as the backend of the section, it consists of a completely different panel
only available to verified mentors.
My Blogs: frontend and backend
4. Hridayesh Nadella:
Contact Page: frontend and backend
designed the UI of the contact us page as well as did the backend, which includes updating of all the contact
information from the database
News Section: frontend and backend
designed the UI of the news section as well as the backend, uploading the latest news by the backend database,
it will further be connected to api
Charts Section: frontend
designed the UI of the charts section, visitable by an option on the navbar
Implemented search sections in news and featured section.
Implemented like feature of featured blogs.
Designed the not logged in page.
5. Vamsidhar:
About Us: frontend
designed the UI of the about us page, displaying information about the website, it's authors and developers
Featured Section: frontend and backend
designed the UI of the featured section as well as developed the backend, which will help in uploading reports by
the mentors to the page
Transaction Page: frontend and backend
designed the UI of the transaction page and did the backend as well.
Mentor Application: frontend and backend
designed the UI of the application and did the backend as well
Footer: frontend
designed the UI of the fotter present at the end of every page of the website, guiding the user to different sections of
the site
Languages we learned and used: 1. HTML: the basic format of the pages was initially written in HTML which we learned in classromm as well as from w3schools (recommended by our teachers).
2. CSS: css is a styling language which helps us in styling the html page and makes it appear readable, more used friendly, clear and attractive.
3. JS: JavaScript was used for validation and making the web-pages interacive, where html&css gave structure and style JS helped the site to interact with the users.
4. Node JS: allowed us to create all kinds of server-side tools and applications in JavaScript. Maintaing the backend of the project.
5. EJS: Embeded JavaScript lets us embed JavaScript code in a template language that is then used to generate HTML. All the pages are of the extension '.ejs'.
Github Link: https://github.com/Darshanbennur/chaiTrade