This is a Next.js project with the new Nextjs 13 App Directory. Auth, and Database managed with appwrite.

You will find a Getting Started below to guide you on how to setup this project for yourself.

This is my entry to the 2023 Appwrite Hackathon. Be sure to check out my HashNode article for more details. You can find a video demo below of the application.

Link

Link

For the best UI Library check out shadcn/ui

The images below give you a small glimpse at what TheTradingDashboard offers:

Before you are able to run the development server, you will need to update the .env.local If you do not have a .env.local file in the main app directory then go ahead and create one. Populate it with the following informaiton

NEXT_PUBLIC_APPWRITE_PROJECT_ID=
NEXT_PUBLIC_APPWRITE_DATABASE_ID=
NEXT_PUBLIC_APPWRITE_USER_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_USER_MDXDOCS_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_USER_PROPFIRMGROUPS_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_USER_TRADING_ACCOUNT_DATA_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_USER_NEWS_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_USER_BOOKMARKS_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_NEWS_COLLECTION_ID=
NEXT_PUBLIC_APPWRITE_PUBLIC_NEWS_DOCUMENT_ID=

You will also need to create a Web App in Appwrite aswell as a database, and the correct collections. Follow the steps below to setup your Appwrite Cloud Database correctly.

1. Navigate to your Appwrite Console and create a Project.
2. Copy your Project ID into you .env.local as NEXT_PUBLIC_APPWRITE_PROJECT_ID
3. In your project create a Database. Copy your Database ID into you .env.local as NEXT_PUBLIC_APPWRITE_DATABASE_ID
4. In your Database create a new collection calles 'Users'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_COLLECTION_ID
5. Within this Collection create the following attributes;
   1. KEY:'email' TYPE:'string' SIZE:'256'
   2. KEY:'username' TYPE:'string' SIZE:'256'
   3. KEY:'userId' TYPE:'string' SIZE:'256'
   4. KEY:'tasks' TYPE:'string_ARRAY' SIZE:'256'
   5. KEY:'firstName' TYPE:'string' SIZE:'256'
   6. KEY:'latName' TYPE:'string' SIZE:'256'
   7. KEY:'avatarUrl' TYPE:'string' SIZE:'256'
   8. KEY:'phoneNumber' TYPE:'string' SIZE:'256'
   9. KEY:'bio' TYPE:'string' SIZE:'256'
   10. KEY:'country' TYPE:'string' SIZE:'256'
   11. KEY:'cityState' TYPE:'string' SIZE:'256'
   12. KEY:'postalCode' TYPE:'string' SIZE:'256'
6. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
7. In your Database create a new collection calles 'Markdown Documents'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_MDXDOCS_COLLECTION_ID.
8. Within this Collection create the following attributes;
   1. KEY:'userId' TYPE:'string' SIZE:'256'
   2. KEY:'documentId' TYPE:'string' SIZE:'256'
   3. KEY:'title' TYPE:'string' SIZE:'256'
   4. KEY:'content' TYPE:'string' SIZE:'1073741824'
   5. KEY:'createdAt' TYPE:'string' SIZE:'256'
   6. KEY:'updatedAt' TYPE:'string' SIZE:'256'
9. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
10. Within the indexes of this collection, create an index of Index Type 'Key' with attribute userId.
11. In your Database create a new collection calles 'Prop Firm Groups'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_PROPFIRMGROUPS_COLLECTION_ID.
12. Within this Collection create the following attributes;
    1. KEY:'personal-accounts' TYPE:'string_ARRAY' SIZE:'1000000'
    2. KEY:'FTMO' TYPE:'string_ARRAY' SIZE:'1000000'
    3. KEY:'MyForexFunds' TYPE:'string_ARRAY' SIZE:'1000000'
    4. KEY:'MyFundedFx' TYPE:'string_ARRAY' SIZE:'1000000'
    5. KEY:'BespokeFunding' TYPE:'string_ARRAY' SIZE:'1000000'
    6. KEY:'TrueForexFunds' TYPE:'string_ARRAY' SIZE:'1000000'
    7. KEY:'UserId' TYPE:'string' SIZE:'256'
13. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
14. In your Database create a new collection calles 'Trading Account Data'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_TRADING_ACCOUNT_DATA_COLLECTION_ID.
15. Within this Collection create the following attributes;
    1. KEY:'AccountKey' TYPE:'string' SIZE:'1000'
    2. KEY:'TradingHistory' TYPE:'string' SIZE:'1073741824'
16. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
17. Within the indexes of this collection, create an index of Index Type 'fulltext' with attribute 'AccountKey'
18. In your Database create a new collection calles 'News'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_NEWS_COLLECTION_ID.
19. Within this Collection create the following attributes;
    1. KEY:'lastUpdated' TYPE:'datetime'
    2. KEY:'news' TYPE:'string' SIZE:'1073741824'
20. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
21. In your Database create a new collection calles 'User News'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_NEWS_COLLECTION_ID.
22. Within this Collection create the following attributes;
    1. KEY:'userId' TYPE:'string' SIZE:'256'
    2. KEY:'userNews' TYPE:'string' SIZE:'1073741824'
23. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.
24. In your Database create a new collection calles 'User Bookmarks'. Copy your Collection ID into you .env.local as NEXT_PUBLIC_APPWRITE_USER_BOOKMARKS_COLLECTION_ID.
25. Within this Collection create the following attributes;
    1. KEY:'bookmarks' TYPE:'string' SIZE:'1073741824'
26. Within the settings of this collection, Update Permissions to All Users with Create, Read, Update, Delete.

This should complete your Appwrite Cloud setup.

Navigate into the main app directory. Then run the install dependencies and run the development server:

npm i

npm run dev

Open http://localhost:3000 with your browser to see the result.

If you plan to publish to vercel you need to upload your environmental variables ontop vercel. You will also need to get your base url from vercel and update it in your appwrite project.

1. Navigate to your project in the appwrite console and scroll down to integrations where you will see your web app.
2. Click it and update your hostname to the base url of your vercel app.

For example if your url is 'http://localhost:3000' only use 'localhost:3000' as your hostname.