diff --git a/src/App.tsx b/src/App.tsx index d631c0e..409f45f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { AppStateProvider } from "./states/AppState"; import Home from "./pages/Home"; import Scanner from "./pages/Scanner"; -import Backtest from "./pages/Backtest"; +import Details from "./pages/Details"; import Contact from "./pages/Contact"; const queryClient = new QueryClient(); @@ -18,7 +18,7 @@ function App(): React.ReactElement { } /> } /> - } /> + } /> } /> diff --git a/src/assets/images/light-peaks.svg b/src/assets/images/light-peaks.svg new file mode 100644 index 0000000..0fb61af --- /dev/null +++ b/src/assets/images/light-peaks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/peaks.svg b/src/assets/images/peaks.svg new file mode 100644 index 0000000..f6972de --- /dev/null +++ b/src/assets/images/peaks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/About.tsx b/src/components/About.tsx index f1e6a42..4eae38c 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -1,10 +1,10 @@ -import { Link } from "react-router-dom"; +import { HashLink as Link } from "react-router-hash-link"; const About = () => { return (
@@ -14,26 +14,29 @@ const About = () => {

About Us

-

+

The Algorithmic Trading Society of Turkey was founded in March 2020 with the aim of bringing people together to develop their understanding of the application algorithms in a financially driven context.

-

+

We hope to build a community of Algo traders that can help improve one another.

-
- - Scanner +
+ + How We Work
diff --git a/src/components/Info.tsx b/src/components/Info.tsx new file mode 100644 index 0000000..6a1f3ad --- /dev/null +++ b/src/components/Info.tsx @@ -0,0 +1,25 @@ +const Info: React.FC = () => { + return ( +
+
+

+ Please do not hesitate to contact us, if you want to learn more about + simple trading strategies or more complicated statistical arbitrage of + stocks. Regardless of whether you are a novice to trading or a veteran + Quant, all are welcomed to be part of the society. +

+

+ {" "} + + Email: algotrasoft@gmail.com +

+
+
+ ); +}; + +export default Info; diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index c3bec5e..c31930d 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -1,7 +1,7 @@ import { HashLink as Link} from 'react-router-hash-link' const Footer: React.FC = () => { return ( -
+
@@ -16,12 +16,12 @@ const Footer: React.FC = () => {
-
+
Home About Us - Features + How We Work
-
+
Scanner Contact
diff --git a/src/components/Layout/Layuot.tsx b/src/components/Layout/Layout.tsx similarity index 100% rename from src/components/Layout/Layuot.tsx rename to src/components/Layout/Layout.tsx diff --git a/src/components/Search.tsx b/src/components/Search.tsx deleted file mode 100644 index e828fa0..0000000 --- a/src/components/Search.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useApp } from "../states/AppState"; - -const Search: React.FC = () => { - const { searchQuery, setSearchQuery } = useApp(); - - return ( -
-
-
Search
-
- setSearchQuery(e.target.value)} - placeholder="Enter Stock Name" - /> -
- -
-
- ) -}; - -export default Search; \ No newline at end of file diff --git a/src/components/Cover.tsx b/src/components/UI/Cover.tsx similarity index 70% rename from src/components/Cover.tsx rename to src/components/UI/Cover.tsx index 074459d..e0523f9 100644 --- a/src/components/Cover.tsx +++ b/src/components/UI/Cover.tsx @@ -5,10 +5,10 @@ type CoverProps = { const Cover: React.FC = ({header,description}) => { return( -
+

{header}

-

{description}

+

{description}

) diff --git a/src/components/Loader.tsx b/src/components/UI/Loader.tsx similarity index 100% rename from src/components/Loader.tsx rename to src/components/UI/Loader.tsx diff --git a/src/components/Work.tsx b/src/components/Work.tsx index 214b90b..5b098e3 100644 --- a/src/components/Work.tsx +++ b/src/components/Work.tsx @@ -1,14 +1,16 @@ +import { HashLink as Link } from "react-router-hash-link"; + const Work: React.FC = () => { return ( -
+
- +

Grow Together

@@ -56,7 +58,18 @@ const Work: React.FC = () => { algorithmic strategtic results. You can then download the code and run it on your own machine. You can also use the code as a starting point for your own algorithmic trading strategy. To see - the scanner in action, click the button + the scanner in action,{" "} + + Click + +

diff --git a/src/components/Hero.tsx b/src/components/hero/Hero.tsx similarity index 92% rename from src/components/Hero.tsx rename to src/components/hero/Hero.tsx index 0f5167d..5ab65bc 100644 --- a/src/components/Hero.tsx +++ b/src/components/hero/Hero.tsx @@ -1,11 +1,10 @@ import React from "react"; import Typed from "react-typed"; -import Particle from "./Particle"; const Hero: React.FC = () => { return (
-
+

ALGOTRASOFT

THE NEXT GENERATION diff --git a/src/components/Particle.tsx b/src/components/hero/Particle.tsx similarity index 98% rename from src/components/Particle.tsx rename to src/components/hero/Particle.tsx index f60510d..70a6535 100644 --- a/src/components/Particle.tsx +++ b/src/components/hero/Particle.tsx @@ -2,7 +2,7 @@ import { useCallback } from "react"; import type { Container, Engine } from "tsparticles-engine"; import Particles from "react-tsparticles"; import { loadFull } from "tsparticles"; -import useDarkSide from "../hooks/useDarkSide"; +import useDarkSide from "../../hooks/useDarkSide"; const Particle = (props: any) => { const particlesInit = useCallback(async (engine: Engine) => { diff --git a/src/components/BarGraph.tsx b/src/components/results/BarChart.tsx similarity index 89% rename from src/components/BarGraph.tsx rename to src/components/results/BarChart.tsx index 66c5f27..e48b01a 100644 --- a/src/components/BarGraph.tsx +++ b/src/components/results/BarChart.tsx @@ -1,9 +1,9 @@ -type grapProps = { +type barProps = { description: string; value: number; } -const BarGraph:React.FC = ({description, value}) => { +const BarChart:React.FC = ({description, value}) => { const barColor = value < 0 ? "bg-red-500" : "bg-darkCyan"; return( @@ -29,4 +29,4 @@ const BarGraph:React.FC = ({description, value}) => { ) } -export default BarGraph; \ No newline at end of file +export default BarChart; \ No newline at end of file diff --git a/src/components/results/ResultDetails.tsx b/src/components/results/ResultDetails.tsx new file mode 100644 index 0000000..d8c7b29 --- /dev/null +++ b/src/components/results/ResultDetails.tsx @@ -0,0 +1,40 @@ +import { useNavigate } from "react-router"; +import BarGraph from "./BarChart"; +import {BacktestResponseResult} from "../types"; + +const Details: React.FC = ({data}) => { + const navigate = useNavigate(); + + const goBack = () => navigate(-1); + + return ( +
+
+ + + + +
+ +
+ ); +}; + +export default Details; diff --git a/src/components/ResultItem.tsx b/src/components/results/ResultItem.tsx similarity index 88% rename from src/components/ResultItem.tsx rename to src/components/results/ResultItem.tsx index 41d1c9c..94875e7 100644 --- a/src/components/ResultItem.tsx +++ b/src/components/results/ResultItem.tsx @@ -1,12 +1,12 @@ -import Loader from "./Loader"; +import Loader from "../UI/Loader"; import { Link } from "react-router-dom"; -import useFindBacktest from "../hooks/useFindBacktest"; +import useFindBacktest from "../../hooks/useFindBacktest"; -type BacktestCardProps = { +type BacktestProps = { id: number; }; -const BacktestCard: React.FC = ({ id }) => { +const Item: React.FC = ({ id }) => { // in the firebase database, the id's start at 1, but the array index starts at 0 const backtest = useFindBacktest(id - 1); @@ -57,4 +57,4 @@ const BacktestCard: React.FC = ({ id }) => { ); }; -export default BacktestCard; +export default Item; diff --git a/src/components/results/ResultList.tsx b/src/components/results/ResultList.tsx new file mode 100644 index 0000000..782e39e --- /dev/null +++ b/src/components/results/ResultList.tsx @@ -0,0 +1,35 @@ +import { InView } from "react-intersection-observer"; +import { MarketResponseResult } from "../../@types/api"; + +import Item from "./ResultItem"; +import { useApp } from "../../states/AppState"; +const Scanner: React.FC = () => { + const { getStocks, filteredStocks } = useApp(); + + + return ( +
    + {filteredStocks?.map((backtest: MarketResponseResult) => ( + + {({ inView, ref }) => { + return inView ? ( + + ) : ( +
    + ); + }} +     + ))} +
+ ); +}; + +export default Scanner; diff --git a/src/components/results/Search.tsx b/src/components/results/Search.tsx new file mode 100644 index 0000000..0350dd8 --- /dev/null +++ b/src/components/results/Search.tsx @@ -0,0 +1,24 @@ +import { useApp } from "../../states/AppState"; + +const Search: React.FC = () => { + const { searchQuery, setSearchQuery } = useApp(); + + return ( +
+
+
Search
+
+ setSearchQuery(e.target.value)} + placeholder="Enter Stock Name" + /> +
+
+
+ ); +}; + +export default Search; diff --git a/src/index.css b/src/index.css index cd4bb3e..5344c65 100644 --- a/src/index.css +++ b/src/index.css @@ -2,8 +2,9 @@ @tailwind components; @tailwind utilities; -.ficon:hover { +.ficon:hover, .f-nav a:hover { filter: invert(80%) sepia(37%) saturate(7048%) hue-rotate(132deg) brightness(105%) contrast(104%); + color: #202a3c, } \ No newline at end of file diff --git a/src/pages/Backtest.tsx b/src/pages/Backtest.tsx deleted file mode 100644 index 3dc77df..0000000 --- a/src/pages/Backtest.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useParams, useNavigate } from "react-router"; -import useFindBacktest from "../hooks/useFindBacktest"; -import Loader from "../components/Loader"; -import Layout from "../components/Layout/Layuot"; -import Cover from "../components/Cover"; -import BarGraph from "../components/BarGraph"; -const Backtest: React.FC = () => { - const navigate = useNavigate(); - - const { backtest: backtestId } = useParams(); - - const backtest = useFindBacktest(backtestId ? +backtestId : undefined); - - const goBack = () => navigate(-1); - - const loading = ( -
- -
- ); - - console.log(backtest.data?.data); - return ( - -
- - {backtest.isLoading && loading} - {backtest.data?.data && ( -
-
- - - - -
- -
- )} -
- - ); -}; - -export default Backtest; diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 0373879..aca2c3d 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -1,48 +1,15 @@ -import { InView } from "react-intersection-observer"; -import { MarketResponseResult } from "../@types/api"; - -import BacktestCard from "../components/ResultItem"; -import Layout from "../components/Layout/Layuot"; -import { useApp } from "../states/AppState"; -import Loader from "../components/Loader"; -import Search from "../components/Search"; -import Cover from "../components/Cover"; -const Scanner: React.FC = () => { - const { getStocks, filteredStocks } = useApp(); - - const loading = ( -
- -
- ); - +import Layout from "../components/layout/Layout"; +import Cover from "../components/UI/Cover"; +import Info from "../components/Info"; +const Contact: React.FC = () => { return (
-
-
-

- Please do not hesitate to contact us, if you want to learn more - about simple trading strategies or more complicated statistical - arbitrage of stocks. Regardless of whether you are a novice to - trading or a veteran Quant, all are welcomed to be part of the - society. -

-

- {" "} - - Email: algotrasoft@gmail.com -

-
-
+
); }; -export default Scanner; +export default Contact; diff --git a/src/pages/Details.tsx b/src/pages/Details.tsx new file mode 100644 index 0000000..855e3cb --- /dev/null +++ b/src/pages/Details.tsx @@ -0,0 +1,28 @@ +import { useParams } from "react-router"; +import useFindBacktest from "../hooks/useFindBacktest"; +import Loader from "../components/UI/Loader"; +import Layout from "../components/layout/Layout"; +import Cover from "../components/UI/Cover"; +import ResultDetails from "../components/results/ResultDetails"; +const Details: React.FC = () => { + const { backtest: backtestId } = useParams(); + const backtest = useFindBacktest(backtestId ? +backtestId : undefined); + + const loading = ( +
+ +
+ ); + + return ( + +
+ + {backtest.isLoading && loading} + {backtest.data?.data && } +
+ + ); +}; + +export default Details; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 39acc75..f5c5e91 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,7 @@ import About from "../components/About"; -import Hero from "../components/Hero"; -import Layout from "../components/Layout/Layuot"; -import Particle from "../components/Particle"; +import Hero from "../components/hero/Hero"; +import Layout from "../components/layout/Layout"; +import Particle from "../components/hero/Particle"; import Work from "../components/Work"; const Home: React.FC = () => { return ( diff --git a/src/pages/Scanner.tsx b/src/pages/Scanner.tsx index 1ea8a6c..fa0b42f 100644 --- a/src/pages/Scanner.tsx +++ b/src/pages/Scanner.tsx @@ -1,12 +1,9 @@ -import { InView } from "react-intersection-observer"; -import { MarketResponseResult } from "../@types/api"; - -import BacktestCard from "../components/ResultItem"; -import Layout from "../components/Layout/Layuot"; +import Layout from "../components/layout/Layout"; import { useApp } from "../states/AppState"; -import Loader from "../components/Loader"; -import Search from "../components/Search"; -import Cover from "../components/Cover"; +import Loader from "../components/UI/Loader"; +import Search from "../components/results/Search"; +import Cover from "../components/UI/Cover"; +import List from "../components/results/ResultList"; const Scanner: React.FC = () => { const { getStocks, filteredStocks } = useApp(); @@ -21,31 +18,11 @@ const Scanner: React.FC = () => {
{getStocks.isLoading ? loading : } -
    - {filteredStocks?.map((backtest: MarketResponseResult) => ( - - {({ inView, ref }) => { - return inView ? ( - - ) : ( -
    - ); - }} -     - ))} -
+
diff --git a/tailwind.config.js b/tailwind.config.js index 2b49a2b..cc34c3b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,7 +19,8 @@ module.exports = { opensans: ['Open Sans', 'sans-serif'], }, backgroundImage: { - 'scanner-cover': "url('./assets/images/dot.png')", + 'scanner-cover': "url('./assets/images/peaks.svg')", + 'scanner-cover-light': "url('./assets/images/light-peaks.svg')" } }, },