diff --git a/selfhosted/MathewAddala b/selfhosted/MathewAddala new file mode 100644 index 0000000..e033ba6 --- /dev/null +++ b/selfhosted/MathewAddala @@ -0,0 +1,91 @@ +గ్లోబ్‌ట్రాటర్ + +గ్లోబ్‌ట్రాటర్ అనేది React మరియు Three.js తో నిర్మించిన పైరేట్-థీమ్‌డ్ 3D ట్రెజర్ హంట్ గేమ్. ఈ అప్లికేషన్ వినియోగదారులను గ్లోబ్‌ను స్పిన్ చేయడానికి, వాస్తవ-ప్రపంచ స్థానాలను కనుగొనడానికి మరియు నిధిని కనుగొనడానికి లేదా ముందుగా దోచుకున్న ఛెస్ట్‌ను కనుగొనడానికి ఆహ్వానిస్తుంది—అన్నీ మూడు-స్పిన్ పరిమితిలో. + +ఈ ప్రాజెక్ట్ డైనమిక్ యూజర్ అనుభవాన్ని సృష్టించడానికి అనేక ఆధునిక వెబ్ టెక్నాలజీలను ఉపయోగించే ఇంటరాక్టివ్, గేమిఫైడ్ వెబ్ అప్లికేషన్‌గా నిర్మించబడింది. + +లక్షణాలు + +• ఇంటరాక్టివ్ 3D గ్లోబ్: యాదృచ్ఛిక గమ్యస్థానాన్ని ఎంచుకోవడానికి వాస్తవిక 3D గ్లోబ్‌ను స్పిన్ చేయండి (Three.js ద్వారా శక్తివంతం చేయబడింది). +• శాటిలైట్ మ్యాప్ వ్యూ: అధిక-రిజల్యూషన్ శాటిలైట్ మ్యాప్‌తో మీ గమ్యస్థానానికి స్వయంచాలకంగా ఫ్లై చేసి జూమ్ ఇన్ చేయండి (MapLibre GL JS ద్వారా శక్తివంతం చేయబడింది). +• డైనమిక్ ట్రెజర్ సిస్టమ్: + ◦ వరల్డ్ వండర్స్ వద్ద అధిక-విలువ నిధులను కనుగొనండి. + ◦ KL యూనివర్సిటీలో 2000-పాయింట్ జాక్‌పాట్‌ను కనుగొనండి. + ◦ అనేక స్థానాలలో హాస్యాస్పదమైన "లూటెడ్" సందేశాలను చూడండి. +• 3-స్పిన్ పరిమితి: ప్రతి ఆటగాడు అత్యధిక స్కోర్ సాధించడానికి ప్రతి గేమ్‌కు మూడు స్పిన్‌లు పొందుతారు. +• డైనమిక్ ఇమేజ్ ఫెచింగ్: ట్రెజర్ కార్డ్‌లు ప్రతి స్థానానికి ప్రత్యేక చిత్రాలను కలిగి ఉంటాయి, Pixabay API నుండి డైనమిక్‌గా పొందబడతాయి మరియు బ్రౌజర్ యొక్క లోకల్ స్టోరేజ్‌లో కాష్ చేయబడతాయి. +• పాలిష్డ్ యానిమేషన్స్: UI వోర్టెక్స్ ట్రాన్సిషన్, స్టాగర్డ్ కార్డ్ రివీల్స్ మరియు స్కోరింగ్‌పై "కాయిన్ బ్లాస్ట్" యానిమేషన్‌ను కలిగి ఉంది (Anime.js ద్వారా శక్తివంతం చేయబడింది). +• లోకల్ లీడర్‌బోర్డ్: టాప్ కెప్టెన్‌లను ట్రాక్ చేయడానికి అధిక స్కోర్‌లు బ్రౌజర్ యొక్క localStorage లో సేవ్ చేయబడతాయి. +• సీక్రెట్ మోడల్: హోమ్ స్క్రీన్‌పై దాచిన మోడల్ జాక్‌పాట్ స్థానానికి క్లూను వెల్లడిస్తుంది. + +టెక్నాలజీ స్టాక్ + +• ఫ్రంట్‌ఎండ్: React 19 +• బిల్డ్ టూల్: Vite +• 3D గ్లోబ్: Three.js +• 2D మ్యాప్: MapLibre GL JS +• యానిమేషన్స్: Anime.js +• ఎక్స్‌టర్నల్ APIs: + ◦ Pixabay API (స్థాన చిత్రాల కోసం) + ◦ MapTiler API (శాటిలైట్ మ్యాప్ టైల్స్ కోసం) + +ప్రారంభం + +లోకల్ కాపీని పొందడానికి మరియు రన్ చేయడానికి ఈ సూచనలను అనుసరించండి. + +ముందస్తు అవసరాలు + +మీ సిస్టమ్‌లో Node.js (ఇందులో npm ఉంటుంది) ఇన్‌స్టాల్ చేయబడి ఉండాలి. + +ఇన్‌స్టాలేషన్ + +రిపోజిటరీని క్లోన్ చేయండి: + +git clone https://github.com/MathewAddala/globetrotterv1.git + +ప్రాజెక్ట్‌కు నావిగేట్ చేయండి: + +cd globetrotterv1/treasure-hunt + +డిపెండెన్సీలను ఇన్‌స్టాల్ చేయండి: + +npm install + +ఎన్విరాన్మెంట్ సెటప్ + +ఈ ప్రాజెక్ట్ సరిగ్గా పనిచేయడానికి API కీలు అవసరం. + +ఎన్విరాన్మెంట్ ఫైల్‌ను సృష్టించండి: + +treasure-hunt రూట్ డైరెక్టరీలో (package.json ఉన్న అదే ఫోల్డర్‌లో) కొత్త ఫైల్‌ను సృష్టించండి మరియు దానికి .env అని పేరు పెట్టండి. + +API కీలను జోడించండి: + +.env ఫైల్‌ను తెరిచి మీ Pixabay API కీని జోడించండి. మీరు Pixabay వెబ్‌సైట్ నుండి ఉచిత కీని పొందవచ్చు. + +VITE_PIXABAY_API_KEY="YOUR_API_KEY_HERE" + +గమనిక: MapTiler API కీ ఈ వెర్షన్ కోసం సోర్స్ కోడ్‌లో ఇప్పటికే చేర్చబడింది. + +అప్లికేషన్‌ను రన్ చేయడం + +డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభించండి: + +npm run dev + +ఈ కమాండ్ Vite డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభిస్తుంది. + +బ్రౌజర్‌లో వీక్షించండి: + +మీ బ్రౌజర్‌ను తెరిచి మీ టెర్మినల్‌లో చూపిన లోకల్ URL కు నావిగేట్ చేయండి (సాధారణంగా http://localhost:5173). + +లోకల్ నెట్‌వర్క్‌లో పరీక్షించడం + +మీ అదే నెట్‌వర్క్‌లోని ఇతర పరికరాలలో (మొబైల్ ఫోన్ వంటివి) అప్లికేషన్‌ను పరీక్షించడానికి: + +1. మీ ల్యాప్‌టాప్ మరియు మొబైల్ పరికరం ఒకే Wi-Fi నెట్‌వర్క్ లేదా మొబైల్ హాట్‌స్పాట్‌కు కనెక్ట్ చేయబడి ఉన్నాయని నిర్ధారించుకోండి. +2. vite.config.js ఫైల్ నెట్‌వర్క్ యాక్సెస్‌ను అనుమతించడానికి host: true తో ఇప్పటికే కాన్ఫిగర్ చేయబడింది. +3. మీరు npm run dev రన్ చేసినప్పుడు, టెర్మినల్ "నెట్‌వర్క్" URL ను ప్రదర్శిస్తుంది (ఉదా: http://192.168.1.10:5173). +4. గేమ్ ఆడటానికి మీ మొబైల్ పరికర బ్రౌజర్‌లో ఈ నెట్‌వర్క్ URL ను తెరవండి. + +https://drive.google.com/file/d/14HOmRYkzUIVHBRBOjPe1EO72YScDhM6i/view